Vue动态路由配置-router.addRoute
Vue动态路由配置
技术选型:
1. vue
2. vuex
3. vuex-persistedstate（vuex持久化）
4. vue-router
直接上代码
配置基本路由表：这部分路由为前端定死的路由，动态部分为home路由组件下的⼦路由
const routes = [
{
path: '/home',
name: 'home',
component: Home,
children: []
},
{
path: '/login',
name: 'Login',
component: Login
}
]
>>>>>>>>>>>>>>>>>>>>>>>>>>>>
let router = new VueRouter({
routes,
});
两种⽅式去添加动态路由,⼀种是在登录后查询路由表保存到vuex或者localStore下，然后通过前置守卫来动态的添加路由，另⼀种就是登陆之后使⽤$router.addRoute直接添加路由，后者并不推荐，因为再刷新页⾯的时候会出现⽆法到页⾯的情况
这⾥介绍第⼀种⽅式:
/**
* 前置守卫
*/
router.beforeResolve((to, from, next) => {
route add 添加路由if (!hasRoute(to)) {
addRoute();
next(to.fullPath)
} else {
next()
}
})
不难看出其中addRoute()为添加路由的⽅法,⽽hasRoute()⽅法是验证当前路由对象中是否存在将要跳转的路由，如果不存在添加，否则放⾏。这个判断是必要的，如果没有判断，页⾯将会⽆限重定向。⽽且只能写成上诉格式，判断成⽴next(to.fullPath)，不成⽴next().
/**
* 判断当前路由是否存在
* @param to
* @returns {boolean}
*/
function hasRoute(to) {
let find = Routes().find(item => item.name === to.name);
return !!find;
}
代码并不复杂，只是在当前路由表中查询传⼊的路由返回即可，存在返回true，否者false
/**
* 添加路由
*/
function addRoute() {
let routeLocal = utes;
routeLocal.forEach(item => {
("home", {
path: item.path,
component: (resolve) => resolve(require(`@/${itemponent}`)),
name: item.name
})
})
}
⾸先在store中获取路由信息，然后循环添加，当然也可以将路由信息存在cookie，localStore中。
将路由存在store中有⼀点问题，就是在刷新页⾯的时候store同样重置，这样路由信息就没有的，这⾥我采⽤vuex-persistedstate将vuex持久化，当然也可以在store中不存在路由时向后端请求查询(有⼀个问题就是需要保证查询是⼀个同步的，否则是不能被添加到路由对象中的)，
也许有⼈会问为啥添加路由不⽤router.addRoutes()呢？请看下图
以下是vuex的配置:
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
routes: null
},
getters: {
// getRouter: (state => {
// utes.find()
// })
},
mutations: {
routesMutation(state, payload) {
}
},
actions: {
routesActions(context, data) {
contextmit("routesMutation", data)
}
},
plugins: [createPersistedState()]
})
欢迎吐槽
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论