Vue-Router动态添加路由(大概思路1)

路由js

//导入Vue ,需要调用vue.use()方法
import Vue from 'vue'
//配置导入路由相关信息
import Router from 'vue-router'

import login from '../pages/login'
import Forbidden from '../pages/errorPage/403'
import NotFound from '../pages/errorPage/404'
import Layout from '../pages/layout'
import Home from '../pages/home'
//通过Vue.use(),安装使用插件,任何插件都需要使用Vue.use()安装使用
Vue.use(Router)



//初始化路由
const routers = [
  {
    path: '/login',
    name: 'login',
    component: login

  }
]
/**
 * 动态路由
 */
const dynamicRouters = [
  //相当于所有页面的容器
  {
    path: '',
    name: "containner",
    meta: {
      requestAuth: 'true',//需要登录的才能进入
      name: '首页'
    },
    component: Layout,//所有需要添加的页面都写在layout文件夹下
    redirect: 'home',
    chiildren: [
      {
        path: 'home',
        component: Home,
        name: 'home',
        meta: {
          //匹配规则
          name: '首页',
          icon: '显示的图标,自己去element-ui找'
        }
      }
    ]

  },
  {
    path: '/403',
    component: Forbidden

  },
  {
    path: '*',//所有匹配不到的页面
    component: NotFound
  }

]
const router = new Router({
  //选择history url不会出现 # 
  mode: 'history',
  routers

})
//创建VueRouter导出,挂载在App.vue中
export default router

跳转页面判断用户是否登陆

权限对比

后台返回数据格式 和权限路由表做对应处理

路由权限对比,与返回默认路由工具类

登录成功后处理路由