Vue深入-25【Vue路由的使用】

一.基本使用

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

 

二.命名路由

<router-link :to="{name:'home'}">Home</router-link>
<router-link :to="{name:'about'}">About</router-link>
<router-view></router-view>

方便在router文件中改变了Path浏览器路径也会变更，但是不需要在router跳转处进行修改

三.Redirect重定向

{
    path:'/about',
    redirect:{name:"honme"}
}

四.别名Alias

{
    path:'/about-as',
    name:'about',
    component:About,
    alias:'/about'
}

相当于有两个路径

五.动态路由

(1).路径栏跳转

{
    path:'/user/:username',
    name:'user'
    component:User
    
}

<h1>{{$router.params.username}}</h1>//路径上输入user/? 界面就会显示？
例如/user/1 界面上显示1

(2).router跳转

<router-link :to="{name:'about'，params:{username:'mike'}}">Mike</router-link>
点击后界面显示mike

(3).prop接收路由值

props:['username']
《h1>{{username}}</h1>//这里就可以接收路由传递的usename值