官方文档转载自：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
vue-cli搭建的vue框架
1、全局路由钩子
main.js:
路由的钩子配置一个全局前置钩子函数
/* // 全局导航钩子
router.beforeEach(function (to, from, next) {
var logged_in = false;
if (!logged_in && to.path == '/test') // to.path是点击前往的组件
next('/one'); // 跳转的地址
else
next(); // 正常跳转
})
*/
new Vue({
el: '#app',
router,
components: { App }, // App就是App.vue组件
template: '<App/>' // 模版名要跟组件名一样
})
2、子路由的钩子
xxx.vue:
<script>
export default { /* 导出、暴露 */
name: 'one', // name通常为组件名，小写(HelloWorld)
data () {
return {
msg: 'mile'
}
},
methods:{
write () {
console.log(this.$route.params.name)
}
},
beforeRouteEnter:function (to,from,next) {
var from_path = '/';
if(from.path == from_path)
next();
else
next(false);
}
}
</script>
3、组件内钩子
index.js
export default new Router({
routes: [ /* 进行路由配置，规定“/”引入到HelloWorld组件 */
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
// path: '/one/:name',
path: '/one',
name: 'one',
component: one,
beforeEnter: (to, from, next) => { // 路由内钩子用beforeEnter方法
console.log(to)
console.log(from)
// next('/test');
// next(false);
var is_login = false;
if (!is_login) // if (!is_login && from.path == '/')
next(true); //next：路由的控制参数，有如下四种调用方式：
//next()：如果一切正常，则调用这个方法进入下一个钩子。
//next(false)：取消导航（即路由不发生改变）
//next('/login')：当前的导航被中断，然后进行一个新的导航（路径可自由指定）。
//next(error)：如果一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调
else
next();
}
}
]
})
