Vue router addRoutes添加路由后404

• Z时代
• 2024-01-10
• 分类：技术分享

router.js

export const constantRoutes: RouteConfig[] = [
{
path: '/login',
component: () => import(/* webpackChunkName: "login" */ '@/views/common/login.vue'),
meta: { hidden: true }
},
{
path: '/404',
component: () => import(/* webpackChunkName: "404" */ '@/views/common/404.vue'),
meta: { hidden: true }
},
{
path: '/',
component: Layout,
redirect: '/home',
children: [
{
path: 'home',
component: () => import('@/views/common/home.vue'),
name: 'Home',
meta: { title: 'home', icon: 'nav-home' }
}
]
},
{ path: '*', redirect: '/404', meta: { hidden: true } }
]

路由全局拦截

import consumeRoutes from './router/consume'
router.beforeEach(async(to: Route, from: Route, next: any) => {
NProgress.start()
if (getToken()) {
if (AppModule.appList.length === 0) {
router.addRoutes(consumeRoutes);
console.log('router', router)
next()
} else {
next()
}
} else {
// Has no token
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})

上面用到的动态加载的路由配置consume

import { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
const consumeRoutes: RouteConfig[] = [
{
path: '/device',
component: Layout,
redirect: '/list',
children: [
{
path: 'list',
component: () => import('@/views/consume/device/index.vue'),
name: 'Device',
meta: { title: 'device', icon: 'nav-deviceManage' }
}
]
}
]
export default consumeRoutes

全局拦截已经动态addRoutes添加了/device/list这个路由地址，但是页面刷新的时候，还是会跳转到404页面。

求指教啊

回答

consumeRoutes里面path: '/device'重定向到/list里了，而/list这个路径没有匹配到，所以仍然跳到404页面。

补充。

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。

试一下，其他地方不要改

以上是 Vue router addRoutes添加路由后404 的全部内容， 来源链接： utcz.com/a/25117.html