vue router守卫巧妙使用

可以在vue组件中使用 页面的进入 离开 等等 来满足项目需求

点击此处跳转路由懒加载 官网

import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/components/notfound/NotFound'
import Login from '@/components/login/Login'
const Home = () => import ('@/components/home/Home') //下面都是路由懒加载模式 
const Users = () => import ('@/components/users/Users')
const Roles = () => import ('@/components/roles/Roles')
const Rights = () => import ('@/components/rights/Rights')
const Categories = () => import ('@/components/categories/Categories')
const Goods = () => import ('@/components/goods/Goods')
const Goodadd = () => import ('@/components/goodadd/Goodadd')
// import Home from '@/components/home/Home'
// import Users from '@/components/users/Users'
// import Roles from '@/components/roles/Roles'
// import Rights from '@/components/rights/Rights'
// import Categories from '@/components/categories/Categories'
// import Goods from '@/components/goods/Goods'
// import Goodadd from '@/components/goodadd/Goodadd'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/', component: Login },
    { path: '/login', component: Login },
    { path: '/home', component: Home ,
    children: [
      { path: '/roles', component: Roles },
      { path: '/users', component: Users },
      { path: '/rights', component: Rights },
      { path: '/categories', component: Categories },
      { path: '/goods', component: Goods },
      { path: '/goodadd', component: Goodadd }
    ]},
    { path:'*',component:NotFound}
  ]
})
//路由守卫
router.beforeEach((to, from, next) => {
 if(to.path==='/login'){
   return next()
 }

 const token =localStorage.getItem('token')
 if(token){
   next()
 }else{
   next('/login')
 }

})
export default router