import Vue from "vue";
import Router from "vue-router";
import store from '../store/index';
Vue.use(Router);
const router = new Router({
routes: [{
path: "/",
redirect: "/index"
},
{
path: "/order",
meta: {
title: '我的订单',
needLogin: true
},
component: () => import("@/views/order/index")
},
{
path: "/cart",
meta: {
title: '购物车',
needLogin: true
},
component: () => import("@/views/cart/index")
},
{
path: '/login',
component: () => import('@/views/login/index'),
meta: {
title: '登陆'
}
},
{
path: '/index',
component: () => import('@/views/index/index'),
meta: {
title: '首页'
}
},
{
path: "/my",
component: () => import("@/views/my"),
redirect: '/my/center',
children: [{
path: 'center',
meta: {
title: '个人中心',
},
component: () => import('@/views/my/center')
}, {
path: 'set',
meta: {
title: '设置',
},
component: () => import('@/views/my/set')
}]
},
{
// 404配置
path: '*',
component: () => import('@/views/notFound')
}
]
});
router.beforeEach((to, from, next) => {
let {
title,
needLogin
} = to.meta;
// 从vuex获取登录状态
let isLogin = store.state.isLogin;
document.title = title;
if (needLogin && !isLogin) {
next({
path: '/login'
})
} else {
next();
}
})
export default router;
完整的导航解析流程
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。