Vue router动态路由如何实现

免费教程 2024年05月09日 13:00

评论»

本文小编为大家详细介绍“Vuerouter动态路由如何实现”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vuerouter动态路由如何实现”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

实现思路

思路其实很简单，也很明确：

1、将路由分为静态路由(staticRouters)、动态路由

2、静态路由初始化时正常加载

3、用户登陆后，获取相关动态路由数据，

4、然后利用vue：addRoute追加到vue实例中即可。实现思路虽然很简单，但是过程并不是一帆风顺，需要注意的细节还是很多的

环境介绍

vue-cli: v4.x.x

vue: v2.6.11

vuex: v3.4.0

vue-router: v3.2.0

实现过程

路由文件处理(router/index.js):

importVuefrom'vue'importVueRouterfrom'vue-router'importHomeLayoutfrom'../layouts/HomeLayout'importstorefrom'@/store/index'Vue.use(VueRouter)//解决重复点击路由报错的BUGconstoriginalPush=VueRouter.prototype.pushVueRouter.prototype.push=functionpush(location){returnoriginalPush.call(this,location).catch((err)=>err)}constroutes=[{path:'/',name:'homeBase',component:HomeLayout,redirect:{name:'home'},children:[//门户路由{path:'home',name:'home',component:()=>import('../views/portal/Home.vue'),},{path:'lists',name:'lists',component:()=>import('../views/portal/Lists.vue'),},{path:'detail',name:'detail',component:()=>import('../views/portal/Detail.vue'),},]},]//定义静态路由集合conststaticRouterMap=['home','lists','detail']constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes,})//路由全局拦截//以下可根据业务逻辑自行在拦截路由中进行处理，此处仅以本人业务作为示例展示//本示例以vuex+sessionStorage相互配合完成动态路由的数据存储//仅以vuex存储获取到的动态路由信息后，在刷新页面时，动态路由信息是会丢失，//从而导致页面404router.beforeEach((to,from,next)=>{constuserState=JSON.parse(sessionStorage.getItem('userState'))if(!userState||!userState.isLogin){//没有登录//如果前往页面非公共路由，则跳转至首页if(staticRouterMap.indexOf(to.name)<0){next({name:'home'})}else{next()}}else{//登录//已经存在路由列表:注意刚登陆成功第一次调转route时相应store数据还未更新consthasGetRoute=store.getters['user/hasGetRoute']constrouteMap=JSON.parse(sessionStorage.getItem('routeMap'))if(!hasGetRoute&&routeMap){//刷新页面且有route记录数据，可再次追加动态路由store.dispatch('user/updateRouteOfUser',routeMap)next({...to,replace:true})}else{next()}}})exportdefaultrouter

view数据处理

<template><divclass="home"><div>这是demo</div><div><divv-show="!isLogin"><a-divider>调用接口:模拟登陆</a-divider><div><a-space:size="size"><a-buttontype="primary"@click="login()">用户登陆</a-button></a-space><p>{{loading}}</p></div></div></div></div></template><script>//@isanaliasto/srcimport{Base64}from'js-base64'importUserfrom'../../api/user'import{mapGetters,mapMutations,mapActions}from'vuex'exportdefault{name:'home',data(){return{size:"middle",user:{'name':'xxxx','pass':Base64.encode('xxxx')},}},components:{},computed:{...mapGetters('user',['isLogin','userInfo','hasGetRoute'])},methods:{...mapMutations('user',['setUserState']),...mapActions('user',['getUserInfo','getDynamicRouteOfUser']),login(){if(this.isLogin){this.$router.push({path:'/user'})}else{//模拟用户User.login(this.user).then(res=>{this.setUserState({'isLogin':true,'ut':res.data.user_token,'userType':1})this.getUserInfo()//以下就是根据用户登陆信息，获取动态路由信息操作this.getDynamicRouteOfUser(type).then(()=>{this.$router.push({path:'/user'})})}).catch(()=>{})}},},}</script><stylelang="scss"scoped>.home{padding:20px;}</style>

vuex

importVueRouterfrom'../../router'importUserApifrom'../../api/user'importaxiosfrom'axios'importTeacherLayoutfrom'@/layouts/Layout'importNotFoundfrom'@/layouts/404'constuser={namespaced:true,state:{//用户状态相关userState:JSON.parse(sessionStorage.getItem('userState'))||{ut:'',isLogin:false,userType:null},//用户信息相关userInfo:JSON.parse(sessionStorage.getItem('userInfo'))||{},//是否获取routehasGetRoute:false,//routeMaprouteMap:JSON.parse(sessionStorage.getItem('routeMap'))||[],},getters:{ut:state=>state.userState.ut,isLogin:state=>!!state.userState.isLogin,userInfo:state=>state.userInfo,hasGetRoute:state=>state.hasGetRoute,routeMap:state=>state.routeMap[0].children,},mutations:{setUserState(state,playload){state.userState=playloadsessionStorage.setItem('userState',JSON.stringify(state.userState))},setUserInfo(state,playload){state.userInfo=playloadsessionStorage.setItem('userInfo',JSON.stringify(state.userInfo))},setRouteMap(state,routers){state.routeMap=routers//为了防止用户刷新页面导致动态创建的路由失效，将其存储在本地中sessionStorage.setItem('routeMap',JSON.stringify(routers));},setDynamicRouteMap(state,routers){state.hasGetRoute=trueletrouterMaps=filterRouter(routers)//最后追加404路由routerMaps.push({path:'*',component:NotFound})//追加路由//这块是重点，如果直接使用addRoute是无效的routerMaps.forEach(item=>{VueRouter.addRoute(item);})},resetLogin(){sessionStorage.clear()}},actions:{//获取用户信息asyncgetUserInfo({commit}){awaitUserApi.user().then(res=>{commit('setUserInfo',res)}).catch(error=>{console.log(error)})},//获取用户授权动态路由asyncgetDynamicRouteOfUser({commit},type){letflag=false//mockapimockRouter().then(res=>{commit('setRouteMap',res.data)commit('setDynamicRouteMap',res.data)flag=true}).catch(err=>{console.log(err)})returnflag},//刷新重置路由updateRouteOfUser({commit},routerMap){commit('setDynamicRouteMap',routerMap)},}}//handleviewsconstloadView=(viewPath)=>{return()=>import('@/views/'+viewPath)}//HandleroutersconstfilterRouter=(routers)=>{returnrouters.filter((router)=>{//区分布局与视图文件，因为加载方式不同if(router.component==='Layout'){router.component=Layout}else{//viewrouter.component=loadView(router.component)}//删除路由记录中的无用字段：这段是本示例与后台协商的，但在vue-router中不被支持的字段信息，可忽略if(!router.redirect||!router.redirect.length){deleterouter.redirect}//判断是否存在子路由，并递归调用自己if(router.children&&router.children.length){router.children=filterRouter(router.children)}returntrue})}//mock数据asyncfunctionmockRouter(){consturl='http://localhost:8080/t.json'letrouterDataawaitaxios.get(url).then(res=>{routerData=res.data}).catch(err=>{console.log(err)})returnrouterData}exportdefaultuser;路由数据(demo){"data":[{"title":"demo","name":"x","pname":"","path":"/x","type":1,"component":"Layout","redirect":{"name":"xx"},"children":[{"title":"child1","name":"xx","pname":"x","path":"","type":2,"icon":"desktop","component":"xx.vue","redirect":{}},{"title":"child1","name":"xx","pname":"tBase","path":"xx","type":2,"icon":"container","component":"xx.vue","redirect":{"name":"xxx"},"children":[{"title":"child2","name":"xx","pname":"xx","path":"xx","type":2,"icon":"unordered-list","component":"xx.vue","redirect":{}}]},]}]}

读到这里，这篇“Vuerouter动态路由如何实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。