vue 权限-动态路由

根据项目的需求，越来越多的项目都需要进行权限的控制和管理。\

vue-router @4.x和vue-router @3.x的区别：

1、new Router不再是类定义了，而是变成了方法，

import Router from 'vue-router'
new VueRouter（{
　　mode: 'history',
　　scrollerBehavior: () => {y: 0}),
　　routes: baseRouters
}）
=>

import {createRouter, creteWebHistory } from 'vue-router

const router = createRouter({
　　history: createWebHistory(), // createMemoryHistory
　　routes: []
})

// ssr 手动传递适当的历史记录
let history = isServe ? createMemoryHistory() : createWebHistory()
let router = createRouter({
    routes,
    history
})
// someWhere in your serve-entry.js
router.push(request.url)
router.isReady().then(() =>{})

2、移除*捕获异常路由，新增路由匹配原则：

const routes = [
　　{path: '/:pathMatch(.*)*', name: 'no-found', component: NotFound },
　　{ path: '/:patchMatch(.*)', name: 'bad-no-found', component: NotFound }
]
router.resolve({
　　name: 'no-found',
　　params: { pathMatch: ['not', 'found']
}).href

　　

思路：

　1、基础路由设置：

const baseRoutes = [
    { 
        name: 'Login',
        path: '/login',  
        component: () => import('@/views/login.vue')   
    },
    { 
        name: '404',
        path: '/404',   
        component: () => import('@/views/login.vue')   
    }       
]    

　2、后端获取路由目录：

// 通过后端请求获取路由目录，并添加到路由路径文件中
const newRoutes = [
  {
    name: 'Home',
    path: '/home',
    component: () => import（ '@/views/home.vue'),
    meta: {
      title: '首页', // 菜单名称
      rules: [], // 菜单权限-增、删、改、查
      icon: '', // 菜单图标
      auth: '' // 路由验证auth
    }
  },
  {
    name: 'auth',
    path: '/auth',
    component: () => import（ '@/views/auth.vue'),
    meta: {
      title: '权限管理',
      rules: ['Add', 'Del', 'Edit'],
      icon: '',
      auth: ''
    },
    children: [
      {
        name: 'role',
        path: '/role',
        component: () => import（ '@/views/role.vue'),
        meta: {
          title: '角色管理',
          rules: ['Add', 'Edit', 'Del'],
          icon: '',
          auth: ''
        }
      },
      {
        name: 'menu',
        path: '/menu',
        component: () => import（ '@/views/menu.vue'),
        meta: {
          title: '菜单管理',
          rules: ['Add', 'Edit', 'Del'],
          icon: '',
          auth: ''
        }
      }
    ]
  },
]

route.addRoutes(newRoutes)　　

 

　3、更新路由