vue动态路由（权限设置）

1.思路

（1）动态添加路由肯定用的是addRouter，在哪用？

（2）vuex当中获取到菜单，怎样展示到界面

2.不管其他先试一下addRouter

找到router/index.js文件，内容如下，这是我自己先配置的登录路由

现在先不管请求到的菜单是什么样，先写一个固定的菜单通过addRouter添加
添加以前注意：addRoutes()添加的是数组
在export defult router的上一行图中17行写下以下代码

var addRoute=[{path:"/",name:"home",component:()=>import("@/pages/home")}
]
router.addRoutes(addRoute)

在网页当中手动进入home页面，输入网址：localhost:8080
发现没有问题，那么请求到的数据就按照这个格式来

3.登录成功后添加路由

（1）登录

单独的login组件，使用vuex
login组件当中通过this.$store.dispatch("login")调用vuex当中action里面的异步方法进行登录操作，请求数据返回的路由如下：

可以看到返回路由，保存在sessionStorage当中
vuex文件如下

这里sessionStorage存数组要注意存是需要转换JSON.stringify()方法，取值时也需要通过JSON.parse()转换两次转换才能正常使用，
需要复制代码的话如下：

import {login
} from '@/api/index';
import setMenu from '../../router/router'
export let loginStore = {state: {menuList: JSON.parse(sessionStorage.getItem("menu"))||[],},getters: {getState(state) {console.log("sss", state.menuList)return state.menuList}},mutations: {GET_MENU(state, payload) {sessionStorage.setItem("menu", JSON.stringify(payload))state.menuList = payload}},actions: {login({commit}, data) {login(data).then(res => {if (res.data.code == "0") {sessionStorage.setItem("username", data.username)commit("GET_MENU", res.data.oneelevel)setMenu()}})}},
}

将该文件放进store下的index文件当中

import Vue from 'vue'
import Vuex from 'vuex'
import { loginStore } from "./modules/login"
Vue.use(Vuex)export default new Vuex.Store({modules: {loginStore}
})

在router文件下创建router.js文件

import router from '.'
import store from '../store'
export default function setMenu(){if (store.state.loginStore.menuList.length > 0) {var arr = []const path = "pages/home"store.state.loginStore.menuList.forEach(item => {var result = []item.children.forEach((ele, index) => {result.push({path: ele.path,title: ele.name,name: ele.path.split("/")[1],component: (resolve) => require([`@/${ele.url}`], resolve)})})arr.push({path: item.path,title: item.name,name: item.path.split("/")[1],component: (resolve) => require([`@/${item.url}`], resolve),children: result})})router.options.routes.push({path: "/",name: "home",component: (resolve) => require([`@/${path}`], resolve),children: arr})router.addRoutes(router.options.routes)}
}

操作数据，添加路由需要的参数（path、name，以及引入）抛出setMenu方法，在vuex当中有调用
引入文件的不同
router下的index文件当中试了addRoutes没有问题，但请求到数据后就不能用这种方式引入了，这里用到了require方法
require（）方法不能直接引变量，意思就是

reuire([`${item.path}`])      //报错,即使item.pah包含了“@/”也不行
require([`@/+${item.path}`])  //正确

这个方法的目的是将请求到的菜单通过遍历，变为

arr=[{path:'',name:'',component:(resolve)=>require([`@/${....路径}`])}
]

因为请求到的菜单和我的肯定不同，这个方法可以自己定义，自己写，只要转换成想要的格式即可
在home组件当中展示菜单栏
通过v-for遍历就可以了，二级路由的话v-for嵌套

<el-row class="tac"><el-col :span="12"><el-menudefault-active="1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenuv-for="(item,index) in menu":key="index":index="String(index)"><template slot="title"><router-link :to="item.path">{{$t('message.'+item.name)}}</router-link></template><el-menu-itemv-for="(itm,idx) in item.children":key="idx":index="String(index)+'-'+String(idx)"><router-link :to="itm.path">{{$t('message.'+itm.name)}}</router-link></el-menu-item></el-submenu></el-menu></el-col></el-row>

menu通过sessionstorage获取

这里基本上就完成了。（基本上。。。）
回到页面最开始，
打开F12先将Application当中的sessionstorage删除，
回到登录界面，登录成功，显示处菜单，但是刷新就白屏了

在app文件下created当中调用setMenu（）方法完美解决。
再刷新就不会白屏了