1.路由嵌套
路由嵌套,顾名思义,就是一个路由里面再套一层路由,用路由的方式区别出组件和模块的相对关系。
比如:用户管理下有列表(user/list) 和 详情 功能(user/info) 可以放在user路径下面的子路由
const router = new VueRouter({
routes: [ {
path: '/user', name:'User',component: User,
children: [
{ // 当 /user/list匹配成功,list 会被渲染在 User 的 <router-view> 中; path: 'list', component: List},
{ // 当 /user/info匹配成功 // info会被渲染在 User 的 <router-view> 中; path: 'info', component: Info }
]
} ]
})
2.重定向
也是通过 routes 配置来完成,通过一个路由跳到另一个路由,比如推出登录跳到登录路由, redirect 重定向到。。。
routes: [ {
//重定向跳转
path:"/logout",
redirect:"/login" // redirect: { name: 'foo' } 跳转到路由别名
}]
3.传参
通过路由链接传递参数到页面,
1). $route 接收参数:<div>{{$route.params.id}}</div>
{path: '/user/:id', component: User}
2). props 解耦传参 如果 props 被设置为 true,route.params 将会被设置为组件属性,参数可以通过组件形式传 递。
const User = { props: ['id'], template: '<div>User {{ id }}</div>' }
{ path: '/user/:id', component: User,props:true}
<router-link>跳转传参的结构,<!--name:路由名称,params 参数传递,v-bind 绑定带参的对象-->
:to="{name:' User ',params:{id:2,name:'admin'}}