vue 实现动态路由(vue3.0动态路由)

vue 实现动态路由

推荐整理分享vue 实现动态路由(vue3.0动态路由)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue实现动态路由,vue动态路由写法,vue动态路由写法,vue实现动态路由菜单,vue实现动态路由跳转,vue实现动态路由,vue实现动态路由的意思,vue实现动态路由菜单,内容如对您有帮助，希望把文章链接给更多的朋友！

1、什么是动态路由？ 2、动态路由的好处 3、动态路由如何实现

1、什么是动态路由？

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

1）路由可变，不是写死的，动态加载 2）存储分两种：存前端，存数据库

2、动态路由的好处

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

1）灵活，无需手工维护 2）增加安全性

3、动态路由如何实现

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

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

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 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

路由管理界面（可能有不完善的地方） 讲一讲遇到的坑及注意点

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

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

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

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

分享：

走进了一间屋子，如果你是最牛的人，那么你就走错了地方。我的理解：你将没有进步的空间，止步于此。