Vue 动态路由_青青子衿~~_vue中动态路由

irpas 02-07 1150

Vue 动态路由,顾名思义，就是我们的路由是动态加载的而不是写死的，?本质就是使用vue提供的?router.addRoutes 或者?router.addRoute???这两个函数的功能实现的

注意：推荐大家使用 router.addRoute , 因为 router.addRoutes 使用会有警告并且此函数在?vue-router v4.x 里被删除了

静态路由

一般情况,我们的路由都是静态的

写出route 对应的path和component注意path和component时固定的写死的

router 和组件一一对应

export default new VueRouter({ mode: 'hash', // 将所有的路由和组件都注册到这里,这就是[静态路由]，因为都是固定好的 routes: [ { path: '/', component: () => import('../components/A.vue') }, { path: '/b', component: () => import('../components/B.vue') }, { path: '/c', component: () => import('../components/C.vue') }, { path: '/d', component: () => import('../components/D.vue') } ] })

动态路由

动态路由只要是依仗于 vue-router 实例 router 提供的 addRoute() 函数,可以让我们在路由配置中动态添加路由对象的能力,从而达到动态路由的目的.

路由配置由于是动态导入的,所以, 对于那些没有配置的到路由配置里的组件,即使知道路由链接,也无法访问.可以很好的做好的权限管理.

一般用于作为权限管理的时候使用

动态路由模式:

将一些公共路由,写入到 ./router/index.js 中.(登录，注册之类的)从后台获取用户角色(或者动态路由信息),将这些动态路由数据,通过 router.addRoute?()添加到路由配置数组中

注意:

路由的动态加载的，所以相应的路由点击链接 ( 路由跳转的路径 )也应该是动态加载的依据动态路由来循环v-for出点击链接可以使用 vuex?来保存动态路由信息从哪添加动态路由配置以及动态的路由缓存问题

vuex 代码

// 用 vuex 管理动态路由 // 可以做到动态路由缓存. // 数据是响应式的,当动态路由发生改变时,页面的遍历会自动改变 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { userRoutes: [] // 用户的路由信息 }, mutations: { setUserRoutes (state, payload) { state.userRoutes = payload } }, actions: { //请求后端获取路由 async setUserRoutes({ commit, getters, state }, url) { //如果第一次进入项目，没有路由则请求后端，动态设置路由 if (!state.userRoutes.length) { // 异步路由缓存，请求后端接口获取路由 const { data } = await axios.get(url); console.log(data, "请求后端获取的路由信息"); // 提交mutatuons存储路由到vuex commit("setUserRoutes", data); return data; } //如果已经获取过路由了，则直接返回现有路由 return getters.userRoutes; } }, getters: { userRoutes (state) { return state.userRoutes } } })

vue-router 代码

import Vue from 'vue' import VueRouter from 'vue-router' import NoAuthorization from '../components/NoAuthorization.vue' // 无权限提示组件,没有必要设定成懒加载形式 Vue.use(VueRouter) import store from '../vuex' import { mapActions } from 'vuex' const vm = new Vue({ store, methods: { ...mapActions(["setUserRoutes"]) } }) const router = new VueRouter({ mode: 'hash', // 将公用路由注册到路由表中 routes: [ { path: '/', component: () => import('../components/A.vue') }, { path: '/b', component: () => import('../components/B.vue') }, // 对于用户自己手动的用输入链接访问路由表中不存在的路由组件,那么就直接提示无权访问. { path: '*', component: NoAuthorization } // { path: '/c', component: () => import('../components/C.vue') }, // C 角色的专属路由 // { path: '/d', component: () => import('../components/D.vue') } // D 角色的专属路由 ] }) // const url = '/static/C.json' const url = "/static/CD.json"; // 请求调用方法请求后端接口动态设置路由 store.dispatch("setUserRoutes", url).then(routes => { // 动态路由加载,包括缓存功能，处理成vuerouter认识的数据结构 {path:'',name:'',component:''} let dynamicRouter = routes.map(item => { //获取path,name,component 注意component必须是已经定义的vue文件的名字 let { path, name, component } = item; return { path, name, component: () => import(`../components/${component}.vue`) }; }); //遍历请求的数据使用addRoute方法添加到路由中,这就是所谓的动态的路由了 dynamicRouter.forEach(route => { router.addRoute(route); }); }); export default router

CD.json 的数据

//我这里为了方便设置的数据结构和vueRouter需要的结构是一样的 [ { "path": "/c", "name": "去 C 组件", "component": "C" }, { "path": "/d", "name": "去 D 组件", "component": "D" } ]