路由导航守卫

import Vue from 'vue';
import Router from 'vue-router';
import { Message } from 'element-ui';
import Login from "@/components/login.vue";
import Home from "@/components/home.vue";
import Users from '@/components/users.vue';
import Rights from '@/components/rights.vue';
import Roles from '@/components/roles.vue';
import Goodlist from '@/components/goodslist.vue';
import Goodsadd from '@/components/goodsadd.vue';

Vue.use(Router)

const router = new Router({
    routes: [{
        name: 'login',
        path: '/login',
        component: Login
    },
    {
        path: '/',
        name: 'home',
        component: Home,
        children: [{
            //users在home组件内部
            name: 'users',
            path: '/users',
            component: Users
        }, {
            name: 'rights',
            path: '/rights',
            component: Rights
        }, {
            name: 'roles',
            path: '/roles',
            component: Roles
        }, 
        {
            name:'goods',
            path:'/goods',
            component:Goodlist
        },
        {
            name:'goodsadd',
            path:'/goodsadd',
            component:Goodsadd
        }
    ]
    }
    ]
})

// 路由导航守卫
// 任何路由标识变化-》来到路由配置-》自动来到路由守卫-》渲染组件
router.beforeEach((to,from,next)=>{
console.log('守卫执行----------------');
if(to.name === 'login'){
    // 如果要去的是login ---> next() 
    next();
}else {
    // 如果要去的不是login ---> 
    const token = localStorage.getItem('token'); //取token
    // 2.1 !token --> 去登录  //没有token 跳转到login
    if(!token){
        Message.warning("请先登录");
        router.push({
           name:'login'
        });    
        return;
    }
 next();
}
// 2.2 token --> next() //有token 继续
next();
console.log(to,from);//to 去哪  from 来自哪里
})

export default router;

// // 当标识变化时，最终渲染home
// if (!localStorage.getItem("token")) {
//     //如果没有token 跳转到login页面
//     this.$router.push({
//       name: "login"
//     });
//     this.$message.warning("请先登录！！！"); //提示先登录
//   }