Vue-router的导航钩子

vue-router的导航钩子

• 1.全局导航钩子
• 2.单个路由共享钩子
• 3.组件内的钩子
• 4.VueRouter官网

1.全局导航钩子

vue-router全局导航钩子： beforeEach和afterEach是vue-router实例对象的属性；
每次路由跳转，都会执行beforeEach和afterEach。
Vue2.5.0新增了beforeResolve。
共有三个参数：to：要到达的路由；from：当前路由；next；下一步要做的；
参数具体信息可打印，用法见代码。

//路由配置文件index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const routes = [
{
path: '/',
name: 'login',
component: login
},
{
path:'/mainsystem',
name:'mainsystem',
component: mainsystem,
children:[
{
path:'/',
component:map
},
{
path:'/map',
component:map，
meta: {
requireAuth: true // 配置此属性，进入页面前判断是否需要登陆
},
}
]
},
{
path:'/updatetable',
name:'updatetable',
component: updatetable
}
];
//创建router对路由进行管理，通过构造函数new Router()创建。
const router = new Router({
routes
});
//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
console.log('to======>>>',to);
//判断要去的路由有没有requiresAuth,是否需要获取权限
if(to.meta.requireAuth){
//token存在可以进入，根据业务需求自行更改可以获得路由权限的标准
if(localStorage.token){
next();
}else{
console.log('需要重定向！');
next({
path: '/',
query: { redirect: to.fullPath } // 将刚刚要去的路由path作为参数，登录成功后再跳转到该路由
});
}
}else{
//如果无需token,那么直接调用
next();
}
});
export default router;

2.单个路由共享钩子

单个路由钩子： beforeEnter，共三个参数，含义如之前所述。

//路由配置文件index.js
{
path: '/',
name: 'Login',
component: Login,
beforeEnter: (to, from, next) => {
//在进入之前可以做一些事情
next();
}
}

3.组件内的钩子

组件内的钩子：
beforeRouteEnter：进入组件路由前。
beforeRouteUpdate：本路由到下级路由切换触发（Vue2.2新增）
beforeRouteLeave：离开这个路由组件。

//使用位置在具体的组件内
<script>
export default {
name: "mainsystem",
data(){
return{
user:"会飞的阿史 "
}
},
created(){

},
methods:{

},
beforeRouteEnter:function(to,from,next){
//doSomething
next()；
},
beforeRouteUpdate:function(to,from,next){
//doSomething
next()；
},
beforeRouteLeave:function(to,from,next){
//doSomething
next()；
}
}
</script>

4.VueRouter官网

更多的关于vue路由的功能，动态匹配，编程式导航，路由懒加载等——>点击电梯