对路由的说明（六）
路由的创建过程在
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}
]
},
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: 'Form', icon: 'form' }
}
]
},
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
name: 'Nested',
meta: {
title: 'Nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'Menu1' },
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'Menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
meta: { title: 'Menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () =>
import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'Menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () =>
import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'Menu1-2-2',
meta: { title: 'Menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'Menu1-3',
meta: { title: 'Menu1-3' }
}
]
},
{
path: 'menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link' }
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
var DynamicMenu = [
{
path: '/Test', // 输入网址
component: Layout, // 类似母版页
redirect: '/TestPage1', // 输入后如果没有实体页面，则用这个重新跳转
name: 'Test',
meta: { title: 'Test', icon: 'example' },
children: [
{
component: () => import('@/views/TestPage/TestPage1'), // 实体页面
path: '/TestPage1', // 地址栏路径
// set router name. It must be set，in order to avoid problems with <keep-alive>.
// https://blog.csdn.net/danruWang/article/details/91953571 对keep-alive的说明
name: 'TestPage33333', // 渲染的时候进行指定routerview部分
// 标签页的抬头和图标，侧边栏的名称和图标,// 面包屑部分 三个都有变化
meta: { title: 'TestPage33333', icon: 'example' }
},
{
component: () => import('@/views/TestPage/TestPage2'), // 实体页面
path: '/TestPage2',
name: 'TestPage2',
meta: { title: 'TestPage2', icon: 'dashboard' }
}
]
}
]
var aaa = constantRoutes.concat(DynamicMenu)
console.log(aaa)
// 定义创建Router方法，
const createRouter = () =>
new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: aaa
})
console.log('创建路由')
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
静态页面 + 数据库读取的动态页面，
component 引入实体页面
path 页面网址路径
hidden 页面是否隐藏，用于弹出
name 用于keep-alive,这部分没测试，当前测试项目暂未设计
meta:tile ,icon 侧边栏的名称，图标， 面包屑的名称 ，页面标签的说明
逻辑=》 先定义静态路由，再获取动态路由，静态路由套动态路由
最后 创建路由
const router = createRouter()
后台数据到前台后要进行拼接
—————————————————————————————————————————————————————————————————————————————————————————20200714：
困扰了一个多月的路由加载方式，这两天有了新的解决方案
因为新版本的vue模板中permission不再支持component 的 import (`@/views${var}`)
导致之前所有的二级菜单导入及变量转换方式都失败
现改为后台仅指获取role对应的permission label 数组，类似['页面1','页面2','页面3'】
数据后台获取后扔到router构造js中进行 label匹配， 后台数组中含有的部分显示，不包含的部分全部隐藏，这样前台可以根据role来动态设置侧边栏了
由此引发了一个新问题，动态路由的方法，发生在permission之后
导致必须在动态路由的时候获取一次 roleid,以获取权限，但现在发现 roleid永远获取不到，因为页面执行方式是先生成router ,再执行
router.beforeEach,而dispatch('user/getinfo')要在之后才执行。。。日了狗
现在的解决方法只能是再login方法内直接调用 getinfo，也就是用户登陆的时候就直接获取到roleid
