1.思路

(1)动态添加路由肯定用的是addRouter,在哪用?
(2)vuex当中获取到菜单,怎样展示到界面

2.不管其他先试一下addRouter

找到router/index.js文件,内容如下,这是我自己先配置的登录路由
找到项目的router/index文件
现在先不管请求到的菜单是什么样,先写一个固定的菜单通过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()方法完美解决。
再刷新就不会白屏了

Logo

前往低代码交流专区

更多推荐