VueJS路由器处理所有请求

Question

我遇到一个错误，VueJS路由器支持所有的路径，甚至那些一个或多个组件没有链接

const routes: RouteConfig[] = [
{ path: '/', name: 'Home', component: Home },
{ path: '/home', redirect: '/' },
{ path: '/reset-password' },
{ path: '/create', name: 'Create', component: CreateInnovation },
{ path: '/dashboard', name: 'stage-table', component: Dashboard }
];
export const createRouter = () => {
const router = new VueRouter({
mode: 'history',
// @ts-ignore
base: __dirname,
routes
})
return router
}

提前感谢你的帮助，杰里米。

Answer 1

你需要创建一个新的路由，并使用自定义参数regexp来捕获所有尚未定义的路由。您还需要创建一个NotFound组件作为404视图。

Vue 3

const routes: RouteConfig[] = [
{ path: '/', name: 'Home', component: Home },
{ path: '/home', redirect: '/' },
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
];

Vue 2

export const new Router({
routes: [
...
{
path: '*',
name: '404',
component: () => import('./views/404.vue'),
},
]
});