vuex+element 从后台获取数据写导航栏-菜单权限

主要用到 vuexrouter.beforeEachrouter.addRoutes()。vuex 的使用方法可以看我的另一篇博客:vue笔记(四)vuex。

顺便安利一个 在线视频转gif图。

因为第一次用到 router.addRoutes(),在做这个需求的时候遇到了很多问题,这里给大家几个链接,如果碰到了可以点击查看:
1. import 加载组件失败: import() 动态加载component组件失败 ;

2. 路由显示结果正确,但是页面总是跳转到 404 页面: vue 路由权限 页面刷新时报404问题;

3. 每次进入页面时,总是报 name 重复的警告:掘金上的 “luichooy”发表的 vue-router之addRoutes使用遇到的坑,这篇文章对 addRoutes 如何产生这个问题解释挺详细的,但是代码不够详细,我是参考了“学如逆水,不进则退”写的 解决addRoutes后重新登录路由重复警告问题 解决的。


使用vuex 写导航栏

在写静态导航栏时通常会新建一个文件作为组件,数据则是由 this.$router.options.routes 获取。现在我们的路由信息不是从 router 中获取到的,而是从后台获取的,我们暂时先把获取到的这个数据 命名为 menuList,存放在 vuex 中的 state 中。具体代码如下:

思路:

  1. 在 state 中定义一个初始变量 menuList: [],在 actions 中处理请求数据,在 mutations 中将请求到的数据赋值给 state 中的 menuList。
  2. 在组件中获取 state 中处理好的数据。使用 mapGetters
  3. 由于刷新地址,vuex 中的数据会恢复成初始值,使用 router.beforeEach 进行监听,若地址刷新,重新请求数据,使用 $store.dispatch()

1. 登录成功后,发起菜单请求

login(){let userInfo = {token: "ERRR",userCode: "admin",userAccount: "管理员"}sessionStorage.setItem("userInfo", JSON.stringify(userInfo));//dispatch中 userInfo 数据可传可不传,因为刷新的时候,这个数据是拿不到的,总 要从 sessionStorage 中获取this.$store.dispatch("INIT_MENU");this.$router.replace("/")
}

2. 在 store 文件夹下新建 index.js、actions.js、mutations.js、state.js、getters.js。

后台返回数据:(还有一些其他的 id 字段,咱也用不到,这里就不贴了,这个是个大家做一个参考)

{code: "0000",msg: "处理成功",router: [{            path: '/dealCenter',name: 'dealCenter',component: "MyLayout",meta:{  title: "处理中心", hidden: false },children: []},          {path: '/myWorkbench',name: 'myWorkbench',component: "MyLayout",meta:{ title: "我的工作台", hidden: false },children: [{path: "workbenchOne",name: "workbench_one",meta: { title: "工作台一" },component: "/myWorkbench/workbenchOne"},{path: "workbenchTwo",name: "workbench_two",meta: { title: "工作台二" },component: "/myWorkbench/workbenchTwo"},{path: "workbenchThr",name: "workbench_thr",meta: { title: "工作台三" },component: "/myWorkbench/workbenchThr"}]}]
}

代码:

文件名代码描述
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
Vue.use(Vuex);
export default new Vuex.Store({state, mutations,actions,getters
})
在 index.js 中引入 actions.js、state.js、mutations.js、getters等文件。
state.js
let state = {menuList: []}
export default state;
给 menuList 定义一个初始值。
actions.js
import {menu} from "@/components/commonJs/dealMenuData.js"
"INIT_MENU": ( {commit} ) => {//调用获取菜单的接口,将获取到的值赋值给 routerArr。axios().then( res => {if( res.code === "0000"){commit("GET_MENU", menu(res.router))} else {commit("GET_MENU", []);}}   
})
export default actions;
这里的 menu() 是处理从接口中获取到的数据的方法,将数据转换成 routes 路由格式。
mutations.js
let mutations = {"GET_MENU"(state, paylod){state.menuList = paylod;}
}
export default mutations;
将在 actions.js 中处理好的数据赋值给 state 中的 menuList。
getters.js
let getters = {menuList: (state)=>{return state.menuList;}
}
export default getters;
这里要注意,有else返回 [] 的时候和没有else的区别

3. 处理从后台获取的数据,我在 components 下面新建了一个 commonJs 文件夹,commonJs 下面是 dealMenuData.js 。

这里根据你自己定义的 routes 路由格式进行改写。要注意的是:404页面要在 router.addRoutes() 中拼接,具体原因在 步骤5 中会提到。

import Vue from 'vue'
import MyLayout from "@/components/MyLayout"
import NotFound from '@/components/404'
import router from "@/router"
import {createRouter} from "@/router"function _import(str) { // views文件夹下的Home组件,传入的格式为 'Home'return function (resolve) {require([`@/views${str}.vue`], resolve);};
}const menu = function (arr) { let result = [];//将数据进行处理if(arr.length!=0){for( let i=0; i<arr.length; i++){if( arr[i].children.length == 0 ){ //只有一个子菜单let oneSonArr = {path: "list",name: arr[i].name,meta: arr[i].meta,component: _import(arr[i].path +"/list")}Vue.set(arr[i].children, 0, oneSonArr);} else { //有多个子菜单for(let j=0; j<arr[i].children.length; j++){let sonArrs = {};sonArrs = Object.assign({}, sonArrs, {path: arr[i].children[j].path,name: arr[i].children[j].name,meta: arr[i].children[j].meta,component: _import(arr[i].children[j].component)});Vue.set(arr[i].children, j, sonArrs);  }}result.push({path: arr[i].path,name: arr[i].name,component:  MyLayout,redirect: arr[i].children.length == 1 ? arr[i].path+"/list" : arr[i].path +"/"+ arr[i].children[0].path,meta: arr[i].meta,children: arr[i].children})}}result.push({ path: "*",name: "notFound",meta: { hidden: true },component: NotFound})console.log("在处理函数dealMenuData.js中", router)router.matcher = createRouter().matcher; //清空addRoutes中之前存下的路由信息router.addRoutes(result)return result;
}export {menu};

这一部分可以看一下“前端大虾”的【VUE管理菜单权限】使用router.addRoutes。


4. 导航栏组件中使用:

<template><div>{{menuList}}</div>
</template><script>import { mapGetters } from "vuex";export default {computed: mapGetters(["menuList"])}
</script>

5. 在 router/index.js 中解决页面刷新 menuList 数据被清空的问题:

这里需要注意一下:404 不能写到路由,要在 addroutes 里进行拼接404这个路由。原因是在路由中写 404 ,刷新时因为要调用菜单接口,当前路由下的页面还没有被加载进来,先读取到了写在 router 中的路由,所以会先找到 404页。

import Vue from 'vue'
import VueRouter from 'vue-router'import MyLayout from '@/components/MyLayout'
import Login from '@/components/login/login.vue'
import notFound from '@/components/404'import Store from "@/store"
Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',meta: { hidden: true },redirect: "/dealCenter"},{path: '/login',name: 'login',meta: { hidden: true },component: Login}
]// const router = new VueRouter({
//   mode: 'history',
//   base: process.env.BASE_URL,
//   routes
// })const createRouter  = () => new VueRouter({mode: 'hash',base: process.env.BASE_URL, //根routes
});
const router = createRouter();
export { createRouter };//重复点击导航栏报错
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {return routerPush.call(this, location).catch(error => error)
}router.beforeEach((to,from,next) => { //全局前置守卫//to: 将要进入目标的路由对象//form: 即将离开的目标路由对象//执行跳转的下一步钩子if(!to.name && !from.name){ Store.dispatch("INIT_MENU") } //刷新时,to.name和from.name都为nullif(!sessionStorage.getItem("userInfo")){ //判断是否存在session值,若不存在表示没有登录if(to.name != "login"){ //判断当前页面是不是登录页next({name:"login"})} else {next();}} else {next();}
})export default router

在router中写404页面后,刷新时的状况如下图:
在这里插入图片描述
用慢速将情景还原一下”:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sql Server全局变量(转)

Sql Server一共提供了30多个全局变量常用:IDENTITY : 返回最后插入行的标识列的列值。ERROR : 返回最后执行的Transact-SQL语句的错误代码。没有错误则为零。ROWCOUNT : 返回受上一语句影响的行数&#xff0c;任何不返回行的语句将这一变量设置为0。DBTS : 返回当前数据库的…

P3393 逃离僵尸岛 最短路dijkstra

题目描述 小a住的国家被僵尸侵略了&#xff01;小a打算逃离到该国唯一的国际空港逃出这个国家。 该国有N个城市&#xff0c;城市之间有道路相连。一共有M条双向道路。保证没有自环和重边。 K个城市已经被僵尸控制了&#xff0c;如果贸然闯入就会被感染TAT...所以不能进入。由其…

jquery 给iframe里的元素添加事件

$("#iframeId").on("load", function(event){//判断 iframe是否加载完成 这一步很重要$("#divId",this.contentDocument).click(function(){//添加点击事件alert("就是这样");}); });更多专业前端知识&#xff0c;请上 【猿2048】www…

JavaFX技巧7:使用CSS颜色常量/派生颜色

在使用FlexCalendarFX时&#xff0c;我不得不定义一组颜色以可视化不同颜色的不同日历的控件。 每个日历不仅提供一种颜色&#xff0c;还提供几种&#xff1a;用于取消选择/选定/悬停状态的背景和文本颜色。 颜色曾在多个地方使用过&#xff0c;但为了简洁起见&#xff0c;我仅…

spring step 1 : 什么是spring

学习一门技术之前还是花点时间来看看这门技术的特点&#xff0c;我们通过使用这种技术能够达到什么效果。 1.spring是什么&#xff1f; 2.spring能够干什么&#xff1f; 3.为什么使用spring&#xff1f; 1.spring是一个开源的框架&#xff0c;主要是由IoC&#xff0c;AOP&#…

文字溢出显示三个点

1、单行溢出 text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 90%; 2、多行溢出 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 转载于:https://www.cnblogs.co…

import() 动态加载component组件失败

在写 vueelement 从后台获取数据写导航栏 时&#xff0c;当我加载动态路由&#xff0c;import() 总是失败。 假设 path: “/views/Home.vue”&#xff0c;name: “Home”。 一、使用 import() 语法加载组件 参考&#xff1a;“Cookysurongbin”的 解决vue动态路由异步加载im…

JPA /休眠刷新策略初学者指南

介绍 在我之前的文章中&#xff0c;我介绍了实体状态转换 对象关系映射范例。 当刷新当前持久性上下文时&#xff0c;所有管理实体状态转换都将转换为关联的数据库语句。 Hibernate的刷新行为并不总是像人们想象的那么明显。 后写 Hibernate尝试将持久性上下文刷新推迟到最后…

进入登录页时,用户名输入框自动聚焦、按enter键让密码框聚焦,完整输入信息后登录

让element-ui的输入框聚焦的4种方式 思路&#xff1a;&#xff08;可以跳过这一步看完整代码——完整代码&#xff09; 1. 进入页面时&#xff0c;用户名输入框就要获取焦点&#xff0c;使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 …

JS的对象及其属性和方法

在JavaScript中是基于对象的编程&#xff0c;而不是完全的面向对象的编程。       那麽什麽是对象呢&#xff1f;如果你学过一些VB的编程&#xff0c;对这个名词一定不会陌生。通俗的说&#xff0c;对象是变量的集合体&#xff0c;对象提供对于数据的一致的组织手段&…

vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件&#xff1a; node在4.以上&#xff0c;npm在3以上 安装 指令&#xff1a; 1、 npm install -g vue-cli在全局下安装vue-cli # 安装 vue-cli npm install -g vue-cli# 初始化 webpack 项目 vue in…

# reverse swap

目录&#xff1a; swap&#xff08;数字、字符串、&#xff09;reverseStringreverseWordsswap /** 借助临时变量 */ function swap(str1, str2) {const temp str1;str1 str2;str2 temp; } /** 解构赋值 */ [a, b] [b, a];/** 对象 */ {a,b} {a:b,b:a} /** 加法 只适用于…

使用Java编写简单的老虎机游戏

无论游戏多么简单或复杂 &#xff0c;Java都能胜任&#xff01; 在这篇文章中&#xff0c;让我们看一下Java编程的初学者如何制作一个简单而功能齐全的老虎机。 老虎机已经存在很长时间了&#xff0c;但是它的娱乐价值似乎并没有减弱。 InterCasino是第一个在1996年向世界提供…

类似flashget的浮动窗口的实现

作者&#xff1a;苍竹先生下载源代码一、简介&#xff1a;象flashget、迅雷、BT等都有浮动窗口&#xff0c;能详细地显示下载的详细信息&#xff0c;该类型的窗口有一下几个特点&#xff1a;1、窗口无标题栏&#xff0c;窗口的大小跟位图一样大。2、前端显示。3、在客户区内按下…

html笔记(二)html4+css2.0(元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹)

大标题小节一、元素类型1. 元素分类2. 置换和非置换元素3. 元素类型转换二、css精灵三、宽高自适应1. 宽度自适应2. 高度自适应3. 最小高度自适应4. 高度塌陷及解决办法5. 元素的高度自适应屏幕的高度四、BEC概念应用1. 常见定位方案2. 触发BFC3. BFC特性及应用4. BFC概念五、浏…

25.C# 异步调用Web服务

1.创建Web服务 1.1VS新建ASP.Net空Web应用程序 1.2添加Web服务新建项 1.3添加GetWeather方法和相关类 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.EnterpriseServices;namespace WebServ…

css中单位的使用

css中许多的属性都需要添加长度&#xff0c;而长度一般由数字和单位构成&#xff0c;如1px,1.5em,2vh&#xff1b;也可以省略单位&#xff0c;如line-height:1.5,表示行高为字体大小的1.5倍&#xff1b; 长度单位一般也分为相对长度和绝对长度。 &#xff08;一&#xff09;绝…

Office开发程序集版本及部署问题

Office 开发遇到了OFFICE 2003和OFFICE 2007程序集兼容性的问题&#xff0c;使用OFFICE 11.DLL只能适应OFFICE 2003,Office 12.dll 能够兼容Office 2003和Office 2007。 以前部署时&#xff0c;是建议客户安装Office 2003。 今天看到《开发Office的一些应用部署后出现找不到程序…

OSGi:进入微服务架构的门户

在构建可扩展&#xff0c;可靠的分布式系统的背景下&#xff0c;“模块化”和“微服务体系结构”这两个术语如今经常出现。 众所周知&#xff0c;Java平台本身在模块化方面很弱&#xff08; Java 9将通过交付Jigsaw项目来解决这一问题&#xff09;&#xff0c;从而为OSGi和JBos…

新闻实时分析系统-Kafka分布式集群部署

Kafka是由LinkedIn开发的一个分布式的消息系统&#xff0c;使用Scala编写&#xff0c;它以可水平扩展和高吞吐率而被广泛使用。目前越来越多的开源分布式处理系统如Cloudera、Apache Storm、Spark都支持与Kafka集成。 1.下载Kafka并安装 1&#xff09;下载Apache版本的Kafka。 …