精华内容
下载资源
问答
  • 后端返回路由数组,前端生成router。 #登录时获取路由,或者接口返回路由。 login.index async handleLogin() { let res = await postUserLogin(this.loginForm); // console.log(res); if (res.status == 200) {...

    后端返回路由数组,前端生成router。

    登录时获取路由,或者接口返回路由。

    login.index

    async handleLogin() {
          let res = await postUserLogin(this.loginForm);
          // console.log(res);
            if (res.status == 200) {
              localStorage.setItem("token", res.token);
              localStorage.setItem("user", JSON.stringify(res.user));
              localStorage.setItem("router", res.router);
              this.$router.push("/waterQuality");
            }
        },
    

    路由配置基本路由数据,再进行拼接。

    router.js

    import Vue from "vue";
    import Router from "vue-router";
    import store from '../store'
    
    Vue.use(Router);
    
    // 公共路由
    export const constantRoutes = [
    	{
    		path: '/login',
    		name: 'login',
    		meta: {
    			//role: 'admin,root,project,operate,maintain,normal', //权限
    		},
    		component: () => import('@/views/login/index.vue')
    	},
    	{
    		path: '*',
    		meta: {
    			// role: 'admin,root', //权限
    		},
    		component: () => import('@/views/errorPage/404.vue')
    	},
    ];
    
    const VueRouterPush = Router.prototype.push
    Router.prototype.push = function push(to) {
    	return VueRouterPush.call(this, to).catch(err => err)
    }
    
    const router = new Router({
    	scrollBehavior: () => ({
    		y: 0
    	}),
    	routes: constantRoutes
    })
    
    
    //白名单
    const whiteList = ['/login']
    
    router.beforeEach((to, from, next) => {
    
    	if (window.globalConfig.login) {
    
    		if (localStorage.getItem('token')) {
    			if (to.path === '/login') {
    			  next({ path: '/' })
    			} else {
    			// 判断当前用户是否已拉取完路由信息
    			  if (store.getters.roleRouter.length === 0) {
    				//生成路由
    				  store.dispatch('GenerateRoutes').then(accessRoutes => {
    				  
    					// 根据roles权限生成可访问的路由表
    					router.addRoutes(accessRoutes) // 动态添加可访问路由表
    					next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
    				  })
    				
    			  } else {
    				next()
    			  }
    			}
    		  } else {
    			// 没有token
    			
    			if (whiteList.indexOf(to.path) !== -1) {
    				// 在免登录白名单,直接进入
    				next()
    			  } else {
    				next({ path: '/login' });
    			  }
    		  }
    
    	} else {
    		next();
    	}
    })
    
    
    export default router;
    

    操作vuex,路由存放于vuex中。

    store.js

    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    
    const store = new Vuex.Store({
    	state: {
    		//路由处理
    		routes: [],
    		addRoutes: [],
    		mList: [],
    		btnRoleList:[]
    	},
    	getters: {
    		roleRouter: state => {
    			return state.routes;
    		},
    		addRoutes: state => {
    			return state.addRoutes;
    		},
    		menu: state => {
    			return state.mList;
    		},
    		btnRoleList:state => {
    			return state.btnRoleList;
    		},
    	},
    	mutations: {
    		getBtnList:(state) => {
    			let id = JSON.parse(localStorage.getItem("user")).roleId
    			let data={
    				roleId:id
    			}
    			getButtonRouter(data).then(res => {
    				console.log('按钮列表',res.data,id)
    				state.btnRoleList = res.data
    			  })
    			
    		},
    		DEL_ROUTES: (state, value) => {
    			state.addRoutes = []
    			state.routes = []
    		},
    		//设置路由
    		SET_ROUTES: (state, routes) => {
    			state.addRoutes = routes
    			state.routes = constantRoutes.concat(routes)
    		},
    		//设置菜单
    		SET_Menu: (state, list) => {
    			state.mList = list
    		},
    	},
    	actions: {
    		// 生成路由
    		GenerateRoutes({ commit }) {
    			return new Promise(resolve => {
    				// 向后端请求路由数据
    				/* getRouters().then(res => {
    				  const accessedRoutes = filterAsyncRouter(res.data)
    				  //accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
    				  commit('SET_ROUTES', accessedRoutes)
    				  resolve(accessedRoutes)
    				}) */
    				//取登录时返回的数据
    				let list = JSON.parse(localStorage.getItem("router"))
    				console.log('原始路由', list)
    				let allRouter = [
    					{
    						path: '/',
    						name: 'Home',
    						redirect: "/waterQuality",
    						component: () => import('@/views/Home.vue'),
    						children: [
    							{
    								path: '/waterQuality',
    								name: 'waterQuality',
    								meta: {
    									keepAlive: true, // 需要被缓存
    									title: '首页', //页面名
    									icon: 's-home', //图标
    									role: 'admin,root,project,operate,maintain,normal', //权限
    									index: '/waterQuality',
    								},
    								component: () => import('@/views/waterQuality/waterQuality.vue')
    							},
    							...filterRouter(list)
    						]
    					}
    				]
    
    				
    				//生成菜单
    				let allmenu = [
    					{ name: "首页", index: "/waterQuality", icon: "s-home" },
    					...filterMenu(list)
    				]
    				
    				console.log('路由',allRouter)
    				commit('SET_ROUTES', allRouter)
    				commit('SET_Menu', allmenu)
    
    				resolve(allRouter)
    
    			})
    
    		},
    		//删除路由
    		// 退出系统
    		LogOut({ commit, state }) {
    			commit('DEL_ROUTES')
    		},
    	}
    })
    
    
    
    function filterMenu(router) {
    	let menuArr = [];
    	//处理数据
    
    	return menuArr;
    }
    
    
    function filterRouter(router) {
    
    	let arr= [];
    	//处理数据
    	
    	let obj = {
    			path: item.path,
    			name: item.name,
    			meta: {
    				title: item.title, //页面名
    				icon: item.icon, //图标
    				index: item.index,
    			},
    			component: (resolve) => require([`@/views/${item.component}`], resolve)
    		};
    
    	return arr;
    }
    
    
    export default store
    
    

    注意:路由的component要使用 (resolve) => require([@/views/${item.component}], resolve)来引入

    展开全文
  • vue动态添加路由清空路由

    千次阅读 2021-06-09 17:44:17
    刚做的项目分多个模块,点击后再查询菜单,动态加进路由,直接动态添加则爆出警告信息(路由重复): 于是乎想到了先清空路由: resetRouter() { const newRouter = new Router({ mode: 'hash', // ...

    刚做的项目分多个模块,点击后再查询菜单,动态加进路由,直接动态添加则爆出警告信息(路由重复):

    于是乎想到了先清空路由:

    resetRouter() {
          const newRouter = new Router({
            mode: 'hash', // 
            scrollBehavior: () => ({ y: 0 }),
            routes: constantRoutes,  //引入的公共路由
            base: process.env.BASE_URL,
          });
          router.matcher = newRouter.matcher; // reset router
        }

    再进行动态添加即可:

    router.addRoutes(routers);

     

    展开全文
  • // 配置 按钮 import config from "@/config"; const { isbnt } = config; // 代理到vux import store from "@/store"; export let initroute = function(arr) { let routes = [], butList = []; routes = arr....

    1vue -router 数据是存在缓存中,存在刷新丢失(类似vuex),router 添加路由在 路由守卫里统一处理;

    1.登录->添加路由->刷新丢失->路由登录前->添加—>统一 路由守卫是添加(大一统)

    
    import Main from "@/components/main";
    // 配置 按钮
    import config from "@/config";
    const { isbnt } = config;
    
    // 代理到vux
    import store from "@/store";
    
    export let initroute = function(arr) {
      let routes = [],
        butList = [];
      routes = arr.map((item, index) => {
        // 处理路由 button
        if (item.component.indexOf("/") == -1 && item.webPath.indexOf("/") == -1) {
          butList.push(item);
        }
    
        return {
          path: item.webPath,
          name: item.name,
          meta: {
            icon: item.icon,
            title: item.description,
            // 隐藏菜单
            hideInMenu: item.routerType == "otherRouter"
          },
          component: Main,
          children: item.children.map((oitem, index) => {
            // 路由处理
            let o_component;
            if (oitem.component.indexOf("_c") != -1) {
              oitem.component = oitem.component.replace("_c/cwl", "");
              o_component = import(`_c/cwl${oitem.component}`);
            } else if (oitem.component.indexOf("cwl") != -1) {
              oitem.component = oitem.component.replace("@/view/cwl", "");
              o_component = import(`@/view/cwl${oitem.component}`);
              console.log(oitem.children, "=========oitem.children");
            } else if (oitem.component.indexOf("nutrition") != -1) {
              oitem.component = oitem.component.replace("@/view/nutrition", "");
              o_component = import(`@/view/nutrition${oitem.component}`);
            } else if (oitem.component.indexOf("home") != -1) {
              oitem.component = oitem.component.replace("@/view/home", "");
              o_component = import(`@/view/home${oitem.component}`);
            } else if (oitem.component.indexOf("detectassess") != -1) {
              oitem.component = oitem.component.replace("@/view/detectassess", "");
              o_component = import(`@/view/detectassess${oitem.component}`);
            } else if (oitem.component.indexOf("monitoring-center") != -1) {
              oitem.component = oitem.component.replace(
                "@/view/monitoring-center",
                ""
              );
              o_component = import(`@/view/monitoring-center${oitem.component}`);
            }
    
            if (
              oitem.component.indexOf("/") == -1 &&
              oitem.webPath.indexOf("/") == -1
            ) {
              butList.push(oitem);
            }
    
            // 按钮 设置
            oitem.children.forEach((zitem, zindex) => {
              if (
                zitem.component.indexOf("/") == -1 &&
                zitem.webPath.indexOf("/") == -1
              ) {
                butList.push(zitem);
              }
            });
    
            let children = {
              path: oitem.webPath,
              name: oitem.name,
              meta: {
                icon: item.icon,
                title: oitem.description
              },
              component: () => o_component
            };
    
            // 隐藏菜单
            if (oitem.routerType == "otherRouter") {
              children.meta.hideInMenu = true;
            }
            return children;
          })
        };
      });
      console.log(routes, "=====================routes123", butList);
      if (Array.isArray(butList) && butList.length > 0) {
        let isbntarr = [];
        butList.forEach(item => {
          if (item.name in isbnt) {
            isbntarr.push(isbnt[item.name]);
          }
        });
        console.log(isbntarr, "===123");
        window.sessionStorage.setItem("isbntList", JSON.stringify(isbntarr));
      }
      return routes;
    };
    
    
        let routingArray = initroute(JSON.parse(response.respBody));
                  routes.push(...routingArray);
                  router.addRoutes(routes);
    

    路由刷新会丢失 类似于 vuex 的数据结构 因此需要重新赋值 添加
    参考vuex :https://editor.csdn.net/md/?articleId=118481831

      let routelist = sessionStorage.getItem("routelist");
      let routingArray = initroute(JSON.parse(routelist));
      routes.push(...routingArray);
      router.addRoutes(routes);
    

    动态文件

    
            
    // ----------------------------------------------------------------------------------
            res = "huizhou/huizhou";
            let huizhou = require(`@/assets/map/${res}.json`);
            echarts.registerMap("huizhou", huizhou as any);
    //  json 可以进行ajax请求进行处理文件
           
    

    参考:https://www.jianshu.com/p/386916c73dad

           res = "huizhou/huizhou";
            let huizhou = import(`@/assets/map/${res}.json`);
            console.log(huizhou, "======================import");
            huizhou.then((res) => {
              console.log(res.default, "===res");
            });
    

    让我们来分析一下:第一个不同寻常的地方在于-我们引入a.js两次,然而只得到了一次反馈。你可能还记得,这是ES模块的一个特性,当他们为单例时,他们只被调用一次。
    其次,动态导入在静态导入之前执行。这是因为我在我的HTML中引入了传统的脚本中调用了动态import()(你也可以在传统的脚本中使用动态导入,不仅仅是在模块中!):

    <script type="module" src="static.js"></script>
    <script src="dynamic.js"></script>
    

    我们知道type="module"脚本会默认延迟,等到DOM解析后才会按顺序被引入进来。这就是为什么dynamic脚本先被执行。熟练运用import()会让你找到一把打开所有原生ES模块的一把钥匙,你可以随时随地的加载并使用他们。
    第三个不同在于:静态导入保证你的脚本按顺序执行, 但是动态导入的脚本不按它们在代码中显示的顺序执行。你必须知道,每一个动态导入都是独立存在的,他们之间互无关联,也不会等待其他执行完成执行。

    动态import()提供基于Promise的API
    import()遵循ES模块规则:单例、匹配符、CORS 等
    import()可以在传统的脚本中使用也可以在模块中使用
    在代码中使用的import()的顺序与它们被解析的顺序没有任何关联

    <!--module.js-->
    <script type="module" src="module.js"></script>
    
    <!--classic.js-->
    <script src="classic.js"></script>
    
    // module/classic.js
    import('./imported.js').then(()=>{
      console.log('imported.js is just imported from the module/classic.js');
    });
    

    这意味着,import()作为模块执行脚本实际上与在then()函数中我们可以使用模块导出(如module.default等)的语法一致。

    const locale = 'en';
    import(`./utils_${locale}.js`).then(
      (utils)=>{
        console.log('utils', utils);
        utils.default();
      }
    );
    

    关于调试 - 最突出的优点,你可以在浏览器DevTools控制台中访问ES模块,因为import()可以任何地方使用。
    你可以轻松的加载、测试或者调试模块。让我们做一个简单的例子,加载一个官方ECMAScript版本的lodash(lodash-es)并检查其版本和一些其他功能:

    import("https://cdn.rawgit.com/lodash/lodash/4.17.4-es/lodash.default.js")
    .then(({default:_})=>{// load and use lodash 
     console.log(`lodash version ${_.VERSION} is loaded`)
     console.log('_.uniq([2, 1, 2]) :', _.uniq([2, 1, 2]));
    });
    
    Promise.all([
            import('./a.js'),
            import('./b.js'),
            import('./c.js'),
        ])
        .then(([a, {default: b}, {c}]) => {
            console.log('a.js is loaded dynamically');
            
            b('isDynamic');
            
            c('isDynamic');
        });
    
    const CDNs = [
      {
        name: 'jQuery.com',
        url: 'https://code.jquery.com/jquery-3.1.1.min.js'
      },
      {
        name: 'googleapis.com',
        url: 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ];
    
    console.log(`------`);
    console.log(`jQuery is: ${window.jQuery}`);
    
    Promise.race([
      import(CDNs[0].url).then(()=>console.log(CDNs[0].name, 'loaded')),
      import(CDNs[1].url).then(()=>console.log(CDNs[1].name, 'loaded'))
    ]).then(()=> {
      console.log(`jQuery version: ${window.jQuery.fn.jquery}`);
    });
    
    展开全文
  • vue动态路由路由懒加载

    多人点赞 2021-06-28 16:33:26
    这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。 1、配置router 2、使用路由 3、创造用户组件并使用传进来的用户信息 在compute中用this.$route.params.userId,...

    目录

    1、动态路由

    1、配置router

    2、使用路由

    3、创造用户组件并使用传进来的用户信息

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例


    1、动态路由(通过$route.params获得数据

    某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径/user/aaaa/user/bbbb。p除了有前面的/user之外,后面还跟上了用户的ID。这种pathComponent的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)

    1、配置router

    2、使用路由

    1、用组件传递

    2、用函数代码传递

    3、创造用户组件并使用传进来的用户信息

    在compute中用this.$route.params.userId,但是mustache语法中直接$route.params.userId

    参考上面的message就是这样的

    2、路由懒加载

    1、懒加载的方式

    2、懒加载举例

    路由懒加载前

    路由懒加载后(打包后的js分成了多个部分,懒加载了Home和About其实就是把Home和About分成了另外两个js,当需要的时候才加载。)

    参考视频:

    https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

    展开全文
  • 第一步:src/router/index.js 公共路由定义 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /* Layout */ import Layout from '@/layout' export const constantRoutes = [{ path: '/...
  • //配置导入路由相关信息 import Router from 'vue-router' import login from '../pages/login' import Forbidden from '../pages/errorPage/403' import NotFound from '../pages/errorPage/404' import Layout ...
  • 这里感谢router新加的addRoute...在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息 const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou
  • 动态路由添加 先说一下逻辑 首先需求大部分是权限管理,用户权限不一样展示页面也不一样 后端可能会给你配好路由路径(如果不给你配你只能手撕啦) 拿到后端的路径后存在vuex和sessionStorage(解决刷新...
  • 利用 vue-router 的addRoutes方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合routes选...
  • vue3动态路由

    2021-11-25 10:34:14
    当页面刷新后,即使你动态路由添加上去了,也能通过getRoutes拿到,但是刷新页面时的跳转会有问题,提示你该路由不存在之类的,这时要在路由守卫里通过router.push来跳转,这样就可以了(还是会提示错误但不影响使用)...
  • 项目后台需要权限分配,做好之后发现切换帐号的话还是之前的路由,并没有重新添加 解决方法: login.vue页面
  • 最近接到一个需求,不需要在router配置文件里手动注册路由,点击菜单时,根据菜单上的地址,自动添加路由,跳转。(他们说我不管,反正菜单信息给你了,页面我写好了,但是我就不配路由,我懒得配,你自己想办法跳转...
  • Vue动态添加路由 通过官方路由API router.addRoutes 实现。 废话不多说直接上代码,欢迎留言交流! const whiteList = ['/login', '/reset-password'] // 可直接访问的白名单页面 router.beforeEach(async(to, from, ...
  • 项目根据不同角色做了权限控制,前端通过登录获取角色 ,动态加载对应的路由vue-router升级到3.5.1版本之后,突然登录成功之后,路由就不能跳转了 解决办法: 首先说一下我这边的 就是把vue-router 的版本降低到...
  • 一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以...文件的路径有2种,(1)简单的vue功能页面,直接挂在...
  • 在官网下载的框架源码中,已经包含了远程菜单的配置了 我的版本 ant design vue pro 3.0.0 https://github.com/vueComponent/ant-design-vue-pro https://pro.antdv.com/docs/router-and-nav https://github.com/v
  • vue后台路由动态配置

    2021-04-22 15:41:51
    做了好几个项目都需要根绝用户角色做动态路由配置 1.现在附上页面的实现,其中根据路由表生成右侧复选框需要的数据,在改变复选框状态后,将已经勾选的路由名字传递给后台; 2.不同用户登录后,在路由守卫时根据...
  • vue router 动态路由清除

    千次阅读 2021-09-07 16:13:34
    重置matcher可达到路由还原效果 在用户退出时调用 resetRouter(router) 即可还原路由 import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap } from '...' //导入初始化router // ...
  • 开发的哥们儿从网上找了一个简单的框架,通过auth的配置来决定什么权限可以进入到什么页面。具体操作就是登陆获取用户的权限,然后遍历本地的总路由表匹配权限返回当前用户可以访问的路由表。网上大多数的方案是从...
  • 3.路由中某个方法可以设置进行并渲染。 4.以上工作都准备好之后,想一下放在哪里比较合适。 实现 思路1 后端创建菜单数据,我采用的基本json格式如下 { data:[{ path:'',//路径 根菜单要加/ component:'',//组件...
  • addRoutes动态添加路由还没完成,页面就从静态找了。 路由生命周期 静态→动态,404是放到静态的所有老报。 解决: 将404路由也动态添加进去! 演示: 这是我报bug的样子 咱们把404路由删了,用一个变量代替 操作...
  • VueRouter定义路由参数定义方法请求路由数据引入模块最最最主要的还是全局路由导航守卫beforeEach 全局前置守卫router 模块VueRoter 版本问题router.addRoutes 已废弃:使用 router.addRoute() 代替。router.add...
  • vue+ivewui实现动态路由添加,并解决刷新页面空白和页面死循环 困扰了好几天的动态路由问题终于解决了,参考过很多篇文章,在此感谢各位博主的分享。 现将个人新的整理如下,希望能给大家带来更多的帮助。 一.动态...
  • vue Router的动态路由路径配置路由守卫 vue Router 是 vue官方提供的路由管理器,就是你在地址栏输入什么地址就跳到相对应的页面里去。 动态路由路径 下面是刚新建的router.js内容: import Vue from 'vue' //引入...
  • ✅05-Vue3 路由配置 ✅06-TypeScript 配置及说明 ✅07-Vue3 使用 axios ✅08-Vue3 axios 对象封装 ✅09-ESLint 配置及说明 ✅10-ESLint 与 Prettier 集成配置及说明 ✅11-Mock.js 模拟接口数据 ✅12-Vite
  • Ant Design Vue Pro 动态路由

    千次阅读 2021-02-04 11:46:15
    Ant Design Vue Pro 动态路由1、关闭mock2、修改动态权限功能引用4、修改报错5、修改src/api/login.js6、修改permission.js逻辑7、修改src/store/modules/user.js8、修改generatorDynamicRouter 1、关闭mock 注释掉...
  • image.png在路由添加title,content配置image.png若添加if判断,在created内修改样式。image.png添加拦截器router.beforeEach((to, from, next) => {/* 路由发生变化修改页面meta */console.log(to.meta....
  • vue 实现动态路由

    2021-02-18 18:28:01
    很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据,把我们前端配置的路由表...
  • title: VueRouter 动态路由配置的坑 tags: router dynamic VueRouter 动态路由配置的坑 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时,最后还是...
  • Vue动态路由-刷新空白-解决办法 //main.js //"vue-router": "^3.2.0" ... //这里执行动态添加路由的操作 addRoute(parentName: string, route: RouteConfig) next(to.path) } else { next() } }) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,339
精华内容 15,735
关键字:

vue动态添加路由配置

vue 订阅