vue 导航钩子函数
**router.beforeEach**:全局前置守卫,进入路由之前
**router.beforeResolve**:全局解析守卫,在beforeRouteEnter调用之后调用
**router.afterEach**:全局后置钩子,进入路由之后
1.vue-router 导航守卫
router.beforeEach((to,from,next){
//to 表示 进入到那个路由
//from 从那个路由离开
//next 进入下个路由
})
2.登录页面之权限管理
main.js
// 路由守卫
// 无论是刷新还是跳转路由,第一个进入的就是这个路由前置钩子函数
router.beforeEach((to, from, next) => {
store.commit('settoken', localStorage.getItem('token')); // 获取 token
if (to.meta.requireAuth) {
// 判断路由是否需要登录权限
if (store.state.token) {
// 判断是否存在本地token
next();
} else {
next({
path: '/login',
query: { redirect: to.fullPath }
});
}
} else {
next();
}
});
2.router.js
const routes = [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: () => import("../views/Register.vue")
},
{
path: '/login',
name: 'login',
component: () => import("../views/Login.vue")
},
{
path: '/index',
name: 'index',
component: () => import("../views/index.vue")
},
{
path: "/botnav",
name: "botnav",
component: () => import("../views/Botnav.vue"),
children: [
{
path: "index",
name: "index",
component: () => import("../views/index.vue")
},
{
path: "list",
name: "list",
component: () => import("../views/List.vue")
},
{
path: "search",
name: "search",
component: () => import("../views/search.vue")
},
{
path: "cart",
name: "cart",
meta: {
requireAuth: true // 当出现这个字段,表示这个路由页面需要登录权限
},
component: () => import('../views/Cart.vue')
},
{
path: "mine",
name: "mine",
meta: {
requireAuth: true // 当出现这个字段表示路由页面需要登录权限
},
component: () => import("../views/Mine.vue")
}
]
}
];