1.给需要的权限的路由添加标记
2.添加全局前置首位
3.仔细阅读官方文档很有必要!
const router = new Router({ mode: 'history', routes: [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: Login }, { path: '', name: 'home', component: Home, children: [ { path: '/gain', name: 'gain', component: Gain, meta: { requireAuth: true // 添加需要权限的标记 } }, { path: '/devOps', name: 'devOps', component: DevOps, meta: { requireAuth: true } } ] } ] }); router.beforeEach((to, from, next) => { const userInfo = getLocalStore('user’); // 读取本地用户信息。自己写的方法! if(to.matched.some(res => res.meta.requireAuth)) { // 判读是不是要权限登录 if (userInfo && userInfo.user && userInfo.token) { // 在去判断当前用户的信息 next(); // 如果是 直接渲染 } else { next('/login’); // 否则跳转登录页面 } } else { next() // 不是就直接去渲染路由 }; });