vue-router 4.0版本addRoutes方法不生效问题解决
解决addRoute方法不生效问题
·
问题描述
- 不知道从
vue-router
的3.x
版本后就不再支持addRoutes()
方法了,本来对vue
用的就不是很6,这样一搞我更懵得不行了。 - 简单来描述一下我所遇到的问题,在全局导航守卫里添加了动态路由后,使用
router.push()
方法跳转到新的位置(组件)没问题,但是直接在地址栏输入路径,甚至是在原路径上刷新,都无法完成跳转,浏览器这么说:[Vue Router warn]: No match found for location with path "/xxx"
上代码,router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import axios from 'axios'
const routes: Array<RouteRecordRaw> = [];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach(async (to, from, next) => {
var requestUrl = "http://127.0.0.1:8000/api/system/menus/";
await axios
.get(requestUrl)
.then(res => {
for(var i =0; i<res.data.length; i++) {
var te = {
path: res.data[i].url,
name: res.data[i].name,
component: () => import('@/views/Sys/Jingchuan.vue')
};
}
.then(res => {
})
.catch((res) => {
console.log("except");
});
if (to.path === '/login') {
// 如果是访问登录界面,如果用户会话信息存在,代表已登录过,跳转到主页
if(token) {
next({ path: '/' })
} else {
next()
}
} else {
if (!token) {
// 如果访问非登录界面,且户会话信息不存在,代表未登录,则跳转到登录界面
next({ path: '/login' })
} else {
// 加载动态菜单和路由
for(var i=0; i<dd.length; i++) {
router.addRoute('Home', dd[i]);
router.options.routes.push(dd[i]);
//router.push(dd[i].path)
console.log(router);
}
console.log(router.getRoutes());
store.commit('menuRouteLoaded', true)
next()
}
}
})
更多推荐
已为社区贡献5条内容
所有评论(0)