vue 简易路由导航守卫

路由导航守卫"/>

vue 简易路由导航守卫

vue路由导航守卫

vue 官方文档

目的：在没有登录之前，无法进入首页

src/router/index.js

   improt Vue from 'vue'import Router from 'vue-router'// 引入两个组件improt index from '../pages/TestIndex'improt login from '../pages/TestLogin'Vue.use(Router)const router = new Router（{mode:"history",    //去除 #routes:[{path:"/",name:"index",component:index},{path:"/index",name:"index",component:index},{path:"/login",name:"login",component:login   }]}）router.beforeEach((to,from,next)=>{//登录时保存的tokenlet token = sessionStorage.getItem("access-token")//如果直接访问登录页面if(to.path == "/login"){//如果信息存在，是登陆过，跳转到主页，信息不存在，则没有登陆过，继续登录if(token){next({path:"/"})}else{next()}//如果访问的是非登录页面}else{//信息不存在，则直接跳转登陆页面if(!token){next({path:"/login"})}else{next()}}})export default router;