vue动态路由的实现步骤

2023-06-14 06:30| 来源: 网络整理| 查看: 265

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

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

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 = true router.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

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

3.由于添加完路由还会重复执行一遍路由守卫，所有必须确保不要一直死循环添加路由。否则直接崩

【本文地址】

公司简介

联系我们