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-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu
              v-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-item
                v-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（）方法完美解决。
再刷新就不会白屏了