组件中的路由
<router-link to=""></router-link>
无参数
<router-link to="/ar/1">测试一</router-link>
<router-link to="/ar/2">测试二</router-link>
与router1.x不同点
在vue-router2.x中使用<router-link的方式,v1.x中使用<a v-link="'/about'">About</a>
带参数
<router-link to="/ar/1?id=1&age=22">测试一</router-link>
<router-link to="/ar/2?id=2&age=24">测试二</router-link>
在vue-devtools中可查看到所有的某个路由的所有信息:
路由的重定向
路由的重定向需要我们在路由文件中配置:
new Router({
...
{
path: '/ar',
name: 'ar',
component: Ar
},{
path: '/ar/1',
redirect: '/ar/2', // 配置redirect跳转到测试二
name: 'ar1',
component: Ar1
},{
path: '/ar/2',
name: 'ar2',
component: Ar2
}
]
})
注意：从图中看出，虽然路由发生了跳转，但是后面跟的参数并没有发生变化。
组件内的导航钩子
beforeRouteEnter(to, from, next) 进入路由时候触发
beforeRouteLeave(to, from, next) 离开路由时候触发
参数含义：
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
注意的点：在我写demo的时候发现，如果你在一个组件这么定义
...
beforeRouteEnter (to, from, next) {
},
...
进入路由钩子中什么也不执行next()的话，会一直无法跳转到对应的路由
所以，建议一旦用了组件钩子，就一定不要忘记next!
路由钩子不同于router1.x
-
activate被替换为beforeRouteEnter -
deactivate被移除,使用beforeDestroy或者destroyed钩子作为替代。 -
canActivate被替换为beforeEnter -
canDeactivate被替换为beforeRouteLeave
嵌套路由
需要嵌套的目录结构:
- /ar (单独组件)
- /ar/1 (单独组件)
- /ar/2 (单独组件)
现在路由文件中配置：
new Router({
routes: [
...
{
path: '/ar',
name: 'ar',
component: Ar,
children:[ // 在ar中添加children子路由
{
path: '1',
name: 'ar1',
component: Ar1
},
{
path: '2',
name: 'ar2',
component: Ar2
}
]
}
// ,{
// path: '/ar/1',
// name: 'ar1',
// component: Ar1
// },{
// path: '/ar/2',
// name: 'ar2',
// component: Ar2
// }
]
})
ar.vue文件:
<template>
<div>
Ar下有两个嵌套的子路由
<router-link to="/ar/1?id=1&age=22">子路由一</router-link>
<router-link to="/ar/2?id=2&age=24">子路由二</router-link>
<router-view></router-view>
</div>
</template>
可见这个单文件中有两个router-view。