vue2.0 + router 3. 0 动态添加路由

3月11日周五

作日回顾

.动态添加路由

实现语句

vue 2.0使用
this.$router.addRoutes();
this.$router.addRoutes(currRoutes);//添加路由和 Home是同级别的vue3.0使用 + router4.0
this.$router.addRoute();
this.$router.addRoute('Home',currRoutes); //可以实现将currRoutes作为 Home的子路由，插入到Hoem下
//并且还有删除路由语句

 ps版本问题：请注意vue-router的4.0以上版本， vue2.0 是不支持，4.0 以上版本只能 vue3 使用，过高版本会导致页面变白屏.npm install vue-router --save这样会安装最新版本，目前是 4.0 ，

实现思路

vue2.0 + router 3. 0 ，只能使用

this.$router.addRoutes();

因为没能实现在 home 下添加子级路由的想法，所以就将 home 和其子路由都从 router.js中分离出来。
方案一：在 vuex 中通过 公共路由 和 分权限路由 进行拼接，返回一个重新定义的带子集的 home 路由
方案二：拿到路由进行替换，（PS感觉比较和第一种相似且复杂）

tips1 ：路由表

vuex 中state 模拟拿到的数据

vuex中其他

getters: { //与上一个方法类似allRouters(state) {return state.allRouters},nowRoutes(state) {let name = state.shenfen;// let name = sessionStorage.shenfen;console.log('getters  name:' + name);//拼接新 路由，state身份变化时，自动刷新getters，没有可能导致不更新let aa = state.allRouters.PublicRouter;if (name == '测试') {let bb = state.allRouters.text;aa[0].children.push(...bb); //数组拼接不会产生新数组}return aa;}},mutations: { //改变状态,不建议使用这种方法LOGIN(state, params) { //需要点击事件去提交  在home中定义按钮           需要parmsa来接受state.shenfen = params.shenfen;sessionStorage.shenfen = params.shenfen;},LOGOUT(state) {state.shenfen = null;window.sessionStorage.removeItem('shenfen')}},actions: {  //actions提交mutations 不直接改变状态login(context, params) {context.commit('LOGIN', params)},logout(context) {context.commit('LOGOUT')}},

tips2：登录中获取身份，

登录成功时

if (res.data.stateCode == 0) {this.$message({message: res.data.stateMsg,type: "success",});window.sessionStorage.token = res.data.token;//本地存储 身份sessionStorage.shenfen = this.department;// console.log(sessionStorage.shenfen);this.$store.dispatch("login", {shenfen: this.department,});// return;//添加路由 ，在跳转页面之前。this.addrouters();this.$router.push("/homePage").catch(() => {});} ********************addrouters() {let nowRoutes = this.$store.getters.nowRoutes; //调用时不用 给nowRoutes加（）//console.log("登录页");//console.log(nowRoutes);this.$router.addRoutes(nowRoutes);},

tips3：小bug，页面刷新后，通过this.$router.addRoutes(); 添加的路由会消失。

在 app.vue 下的created 中，重新挂载动态路由

 created() {//判断是否存在，而选择是否刷新 返回。if (sessionStorage.shenfen == null) {console.log(sessionStorage.shenfen);} else {//页面刷新 ，添加路由let nowRoutes = this.$store.getters.nowRoutes;this.$router.addRoutes(nowRoutes);}},

tips4: 将路由渲染到 home页面的侧边导航栏中

此时已经在添加上了 动态路由 ，

在home页面打印一下添加的动态路由

 console.log(this.$router);添加路由到侧边栏打印出来的路由只是定义的，
options:
routes: Array(2)
0: {path: '/login', name: 'Login', component: ƒ}
1: {path: '/choose_dep', name: 'Choose_Dep', component: ƒ}
length: 2
[[Prototype]]: Array(0)
[[Prototype]]: Object

 console.log(  this.$store.getters.nowRoutes );

目标侧边栏样式

       {icon: require("../assets/images/ceshi.png"),url: "test",title: "测试1",children: [{icon: require("../assets/images/ceshi.png"),url: "test2",title: "测试2",},],},

在create 中调用

 created() {// 添加路由到侧边栏，并默认选中第一个this.createSidsbar();},

createSidsbar

 //添加 创建侧边栏，默认选中第一个createSidsbar() {let data = this.$store.getters.nowRoutes[0].children;// console.log(data);let data1 = [];data.forEach((item, index) => {//第一级data1[index] = {url: item.meta.url,title: item.meta.title,icon: item.meta.icon,};//如果有子级，子级也是一个数组，可能有多个数据。if (item.children) {console.log(item.children);let data3 = [];for (let i = 0; i < item.children.length; i++) {let obj = {url: item.children[i].meta.url,title: item.children[i].meta.title,icon: item.children[i].meta.icon,};data3.push(obj); //一个个 push进去，是因为children是一个对象数组，不是单个对象}console.log(data3);data1[index].children = data3;}});console.log(data1);this.leftMenu.navList.push(...data1); //将 整理好的data1 拼接到 navList 中//默认选中第一个this.toTab( data1[0].title , data1[0].url)},

vue2.0 + router 3. 0 动态添加路由相关推荐

vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
Vue2.x动态添加路由实现
适用于:Vue2.x VueRouter3.x 动态添加路由一般应用于受权限控制的路由菜单,由后端返回可以判断该角色具有的权限,前端处理出一份符合权限的路由表,使用addRoutes方法动态添加权限路 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
动态添加路由 addRoute添加路由刷新404
文章目录动态添加路由案例初步动态添加路由-使用导航守卫解决刷新404问题完整代码: 动态添加路由大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...
vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...
router4 ts动态添加路由
今天研究route4.0 在vue3里面,使用ts的方式定义路由并且进行动态添加.route4.0在添加路由的方式上面做了一点点的改动.跟之前的有点不一样,因此记录一下. 一.创建路由文件在项目ro ...
使用addRoutes动态添加路由
登录是获取添加的路由,存在vuex中 login.vue import {initRoutes} from "@/router/index.js"; // 按需引入路由的动态注入方 ...

vue2.0 + router 3. 0 动态添加路由

3月11日周五

作日回顾

实现思路

tips1 ：路由表

tips2：登录中获取身份，

tips3：小bug，页面刷新后，通过this.$router.addRoutes(); 添加的路由会消失。

tips4: 将路由渲染到 home页面的侧边导航栏中

vue2.0 + router 3. 0 动态添加路由相关推荐

最新文章

热门文章

vue2.0 + router 3. 0 动态添加路由

3月11日 周五

作日回顾

实现思路

tips1 ： 路由表

tips2：登录中获取身份，

tips3：小bug，页面刷新后，通过this.$router.addRoutes(); 添加的路由会消失。

tips4: 将路由渲染到 home页面的 侧边导航栏中

vue2.0 + router 3. 0 动态添加路由相关推荐

最新文章

热门文章

3月11日周五

tips1 ：路由表

tips4: 将路由渲染到 home页面的侧边导航栏中