路由守卫

本地环境安装路由插件vue-router：

  cnpm install vue-router --save-dev 

*没有安装淘宝镜像的可以将 cnpm 替换成 npm
安装淘宝镜像 :

 npm install -g cnpm --registry=https://registry.npm.taobao.org

配置
两种配置方法：在main.js中 || 在src/router文件夹下的index.js中

在src/router/index.js中的
1.引入

import Vue from 'vue'
import Router from 'vue-router'

Router是自定义的名字，这里叫这个名字后，下边都要用到的
2.使用/注册

Vue.use(Router)

3.配置
首先在定义路由的时候就需要多添加一个自定义字段isLogin:true ，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由，
否则就进入登录页面。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        isLogin:true    // 添加该字段，表示进入这个路由是需要登录的
      }//路由元
    },{
      path:"/login",
      name:"login",
      component:Login
    }
  ]
})

4.引入路由相对应的地址

import Home from "@/components/home"
import Login from "@/components/login"

5在src/router中创建permission.js文件
引入:

import router from "./index.js"

在路由跳转之前 我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

// 路由守卫

router.beforeEach((to,from,next)=>{
        if(to.matched.some(res=>res.meta.isLogin)){//判断是否需要登录
            if (sessionStorage['username']) {
                next();
            }else{
                next({
                    path:"/login",
                    query:{
                        redirect:to.fullPath
                    }
                });
            }

        }else{
            next()
        }
    });

export default router;

to 表示将要跳转到的组件 (目标组件)
console.log(from); //(源组件)
next();
next 是一个函数
next() 进入下一个组件的钩子函数
next(false) 阻止跳转 中断导航
next("/login") 进入指定的组件的钩子函数

引用：https://www.jianshu.com/p/22c54f0830c9

判断路由中是否显示高亮
判断路由中是否有某一项如果有加添加类名

image.png

列表高亮选中

image.png