怎么用vue实现动态路由

1、什么是动态路由

动态路由,动态即不是写死的,是可变的。我们可以根据自己不同的需求加载不同的路由,做到不同的实现及页面的渲染。动态的路由存储可分为两种,一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。

总结:

1)路由可变,不是写死的,动态加载

2)存储分两种:存前端,存数据库

2、动态路由的好处

使用动态路由可以跟灵活,无需手工维护,我们可以使用一个页面对路由进行维护。如果将路由存储到数据库,还可以增加安全性。

总结:

1)灵活,无需手工维护

2)增加安全性

3、动态路由如何实现

在此以路由存储在数据库为例

流程:一般我们在登录的时候,根据登录用户的角色返回此角色可以访问的页面的路由,前端将路由存储到vuex(vuex存储的数据必须可持久的,不要一刷新页面就不见),我们在路由前置守卫处动态添加拿到的路由,对页面进行渲染。

1)此为我的router目录,index.js对路由添加,守卫拦截等处理。static-route.js为前端定义的静态路由,不需要动态加载的,如登陆页面,忘记密码页面,404页面等。

怎么用vue实现动态路由

怎么用vue实现动态路由

index.js

import Vue from 'vue'import $cookies from 'vue-cookies'import VueRouter from 'vue-router'import store from '../store'import staticRoute from './static-route.js'Vue.use(VueRouter)const router = new VueRouter({	mode: 'history',	base: process.env.BASE_URL,	routes: staticRoute //staticRoute为静态路由,不需动态添加})let isToken = truerouter.beforeEach(async (to, from, next) => {	//定义isToken为true和vuex不为空时添加路由	if (isToken && store.state.routers.routers.length != 0) {		//从vuex中获取动态路由		const accessRouteses = await store.state.routers.routers;		//动态路由循环解析和添加		accessRouteses.forEach(v => {			v.children = routerChildren(v.children);			v.component = routerCom(v.component);			router.addRoute(v); //添加		})		isToken = false //将isToken赋为 false ,否则会一直循环,崩溃		next({			...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)			replace: true, // 重进一次, 不保留重复历史		})	} else {		if (to.name == null) {			next("/404")		} else {			if (to.meta.title) { //判断是否有标题				document.title = to.meta.title //给相应页面添加标题			}			next()		}	}})function routerCom(path) { //对路由的component解析	return (resolve) => require([`@/views/${path}`], resolve);}function routerChildren(children) { //对子路由的component解析	children.forEach(v => {		v.component = routerCom(v.component);		if (v.children != undefined) {			v.children = routerChildren(v.children)		}	})	return children}export default router

2)登陆成功后将获取到的动态路由存储到vuex

怎么用vue实现动态路由

vuex—>index.js

import Vue from 'vue'import Vuex from 'vuex'//数据持久化import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)const routers = {  namespaced: true,  state: () => ({    routers:"",  }),  mutations: {    routers(state, newsdata) {      state.routers = newsdata    },  },  actions: {    routers(context) {      context.commit('routers')    },  },  getters: {    routers(state) {      console.log("getters", state)      return state.routers    },      }}const store = new Vuex.Store({  modules: {    routers: routers,  },    // 数据持久化  plugins: [createPersistedState({    //key是存储数据的键名    key: 'routersData',    //paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token      paths: ["routers.routers"]  })]})export default store

我的动态路由模板

//动态路由const dynamicRoute = [{  "path": "/main",  "name": "main",  "redirect": "/main/index",  "component": "main/main.vue",  "children": [{      "path": "index",      "name": "index",      "component": "index/index.vue",      "meta": {        "name": "index",        "title": "首页",        "icon": "el-icon-location",        "menu":true //true为菜单栏      }    },    {      "path": "Configuration",      "name": "Configuration",      "redirect": "Configuration/route",      "component": "Configuration/index.vue",      "roles": ['developer', "admin"], //  developer、admin角色的用户才能访问该页面      "meta": {        "title": "配置",        "icon": "el-icon-location",        "menu":true      },      "children": [{          "path": "route",          "name": "route",          "component": "Configuration/route/index.vue",          "meta": {            "title": "菜单",            "icon": "",            "menu":true          },        }, {          "path": "user",          "name": "user",          "component": "Configuration/user/index.vue",          "meta": {            "title": "用户管理",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "admin",          "name": "admin",          "component": "Configuration/admin/index.vue",          "meta": {            "title": "管理员管理",            "icon": "",            "menu":true          },        },                {          "path": "userEdit",          "name": "userEdit",          "component": "Configuration/user/user-Edit.vue",          "meta": {            "title": "编辑用户",            "icon": "",            "menu":false          },        },        ]    },    {      "path": "check",      "name": "check",      "redirect": "check/user",      "component": "check/index.vue",      "roles": ['developer', "admin", "check"], //  developer、admin角色的用户才能访问该页面      "meta": {        "title": "审核",        "icon": "el-icon-location",        "menu":true      },      "children": [{          "path": "user",          "name": "checkUser",          "component": "check/check-user/index.vue",          "meta": {            "title": "用户实名审核",            "icon": "el-icon-location",            "menu":true          }        },        {          "path": "enterprise",          "name": "checkEnterprise",          "component": "check/check-enterprise/index.vue",          "meta": {            "title": "企业认证审核",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "checkNormImage",          "name": "checkNormImage",          "component": "check/check-norm-image/index.vue",          "meta": {            "title": "标准照认证审核",            "icon": "el-icon-location",            "menu":true          },        },        {          "path": "checkHiringJobs",          "name": "checkHiringJobs",          "component": "check/check-hiring-Jobs/index.vue",          "meta": {            "title": "求职、招聘认证审核",            "icon": "el-icon-location",            "menu":true          },        }      ]    }  ]}, ]export default dynamicRoute

路由管理界面(可能有不完善的地方)

怎么用vue实现动态路由

讲一讲遇到的坑及注意点

1)“component”: “check/check-norm-image/index.vue”, 用字符串再在解析,不要像静态路由一样。否则名列前茅次进去可以,刷新就变空白

2)此处为重要的一点,直接用next()不行

next({      ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)      replace: true, // 重进一次, 不保留重复历史    })

3)由于添加完路由还会重复执行一遍路由守卫,所有必须确保不要一直死循环添加路由。否则直接崩溃。这里我用的是isToken变量确保不循环。

关于“怎么用vue实现动态路由”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么用vue实现动态路由”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

文章标题:怎么用vue实现动态路由,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/25725

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云
上一篇 2022年9月15日 下午11:43
下一篇 2022年9月15日 下午11:44

相关推荐

  • 猫鼠服务器是什么公司

    猫鼠(Cats and Mouse)服务器可能是您要询问的一种服务器类型,或者是一个特定服务器名称的误解,但在知识库中并无明确的记录表示猫鼠服务器代表着一个具体的公司。如果您是在询问一个公司或品牌名为“猫鼠”的服务器供应商,可能需要提供更多信息或者具体的上下文才能得出准确答案。如果您实际上指的是一个…

    2024年4月25日
    8200
  • 推理服务器作用是什么

    摘要 推理服务器的作用是1、执行模型推理任务、2、优化推理性能、3、降低延迟、4、提高吞吐量、5、支持多种模型格式、6、提供模型管理与扩展功能。 在这些核心功能中,优化推理性能尤为关键,因为它直接关系到模型部署后的效率和稳定性。推理服务器通过使用专门的算法和硬件加速技术,大幅提高处理速度,同时保持高…

    2024年4月25日
    10500
  • 服务器管理的好处是什么

    摘要 服务器管理的好处包括: 1.提高安全性、2.增强性能、3.确保数据完整性、4.优化资源利用,等重要方面。特别是提高安全性,这是服务器管理中的关键部分,为防止未授权访问、数据泄露和其他潜在威胁,定期对服务器进行维护和更新至关重要。此外,安装安全软件、监控系统漏洞、及时打补丁和执行严格的访问控制策…

    2024年4月25日
    9000
  • 云服务器存储资料是什么

    摘要 云服务器存储资料是1、通过网络访问的远程服务器上存储的数据,其依赖于2、云计算技术,使得数据存取更加灵活和高效。在这两点中,通过网络访问的远程服务器存储意味着用户无需对物理硬件进行管理或投入高额的初期成本,而是通过互联网连接到远程数据中心,实现数据存储和管理。这种模式不仅降低了企业或个人的技术…

    2024年4月25日
    8600
  • 下挂的服务器叫什么

    摘要:下挂的服务器通常被称作1、边缘服务器或2、即服务外设。其中,边缘服务器主要用于提高网络服务的访问速度和提升用户体验。通过布局在接近最终用户的地理位置上,这种服务器能够缓存内容,减少数据传输的延迟,加快载入速度,有效缓解主服务器的负荷。边缘服务器尤其适用于内容交付网络(CDN)和大数据分析等场景…

    2024年4月25日
    10500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部