vue中的动态加载路由

一、在vuex里面对全局数据进行设置

---

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

        state: { nav:[] },

        getters: { navData:state=>state.nav },

        mutations: { setnav(state,data){ state.nav=data; } },

        actions: { SETNAV({commit},data){ commit('setnav',data) } },

 })

二、在router里面对路由进行动态加载

---

 

import axios from 'axios'

import store from '@/store/index'

为了防止代码太多，发生冗余，我们可以对获取子路由的代码进行包装在函数中：

 然后在全局前置守卫router.beforeEach()里面进行申明：

 通过router.addRouter()就可以了，不需要额外的配置；

vuex的相关网址：开始 | Vuex (vuejs.org)https://vuex.vuejs.org/zh/guide/

动态加载路由也是为了多用户权力的不同，比如：存在vip用户和普通用户在页面上存在加载页面不同的业务需求；