Vue2 路由重构

问题

• 使用element-ui 的menu组件，在非菜单的页面，左侧会高亮不了
• 由于路由没做权限拦截，用户知道路径可以随意跳转

解决思路

1. 将路由分为无权限路由和需要验证权限路由
2. 利用路由守卫，处理权限接口和权限路由
3. 对每个路由进行配置

要点:

1. 重置路由

const createRouter = () => new Router({
   
                            linkActiveClass: 'active',
                            mode: 'hash',
                            base: './',
                            routes: constRoutes
                        });
// let newRouter = createRouter()
//在addRoutes之前重置matcher
router.matcher = createRouter().matcher;
// 添加至路由器
await router.addRoutes(filterRouter)

2. 递归组件 side-bar 不断递归自身

<template>
    <div v-if="item.meta">
        <el-submenu :index="item.meta.activeIndex" v-if="item.meta.submenu"> 
        	
            <side-bar
                    v-for="child in children"
                    :item="child"
                    :key="child.name"
            />
        </el-submenu>
        <div v-if="!item.meta.submenu &&  children &&  children.length>0">
            <side-bar :index="item.name"
                      v-for="child in  children"
                      :item="child"
                      :key="child.name"
            />
        </div>
        <template>
            <el-menu-item
            </el-menu-item>
        </template>
    </div>
</template>

代码实现

router.js: 配置路由和路由对应的参数

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
/**
 * {
 *     path:'/',
 *     redirect:'',
 *     component: ()=>import(),
 *     meta?: {
 *	        activeIndex:'', //激活菜单栏的参照
 *			permission: string, // 权限对应的名称
 *			icon?: string, // 图标
 *			title?: string, // 菜单栏标题
 *			isShowMenu?: Boolean // 是否是 el-sub-menu
 *		    isSubmenu: Boolean //是否为菜单栏
 *     },
 *     children:[]
 * }
 */
export const constRoutes =
    [ 
        {
   
            path: "/login",
            name: "login",
            component: () => import("./views/login/login.vue"),
        }
    ]

export const asyncRoutes = [
    {
    
        path: "/",
        name: "layout",
        component: () =>