Vue 动态路由

Vue 动态路由,就是基于 router.addRoutes | router.addRoute 这个 api 的一个功能实现.

推荐使用 router.addRoute , 因为 router.addRoutes 使用时会给出警告! 此函数会在 vue-router v4.x 中被移除!

所谓的静态路由.

常规模式下,我们的路由都是静态的.

• 准备好所有的路由表信息.
• 准备好所有的显示路由的 即可.

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') }
  ]
})

界面:

静态路由.gif

---

所谓的动态路由

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

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

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

动态路由模式:

• 将一些公共路由,写入到 ./router/index.js 中.(公共权限)
• 从后台获取用户角色(或者动态路由信息),将这些动态路由数据,通过 router.addRoute 注册到路由表中.
• 还是要将所有的 组件和结构准备好.

动态路由

注意:

• 由于你路由的动态加载的.
• 所以相应的你的路由点击链接也应该是动态加载的.
• 模板上依赖于你的动态路由来循环v-for出点击链接.
• 所以,你需要使用一个响应式的对象来存储动态路由链接信息列表.
• 你可以使用 vuex 以及任何其他的响应式对象去存储.
• 这里也包含从哪个地方注册进动态路由信息以及路由信息缓存的问题.

所以,我这里使用 vuex 存储动态路由信息.

vuex 代码

// 在这里使用 vuex 管理动态路由
// 好处一: 可以做到动态路由缓存.
// 好处二: 数据是响应式的,当动态路由发生改变时,模板会自动 render 更新.

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)
        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/D.json'
// 动态路由请求并加载到路由表
vm.setUserRoutes(url).then(routes => {
  // 动态路由加载,包括缓存功能
  routes.map(({ path, name, component }) => ({
    path,
    name,
    component: () => import(`../components/${component}.vue`)
  })).forEach(route => {
    router.addRoute(route)
  })
})

export default router

效果

动态路由.gif

码云地址