Vue.js如何在路由未找到时重定向到通用路由

Question

这是我的简单的routes.js文件。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import welcome from './components/welcome.vue';
import restaurant from './components/restaurant.vue';
import eatMe from './components/eat-me.vue';

const routes = [{
    path: '/',
    component: welcome,
    name: welcome
}, {
    path: '/restaurant',
    component: restaurant
}, {
    path: '/eat-me',
    component: eatMe
}]

const router = new VueRouter({
    routes,
    mode: 'history'
});

export default router;

这个很好用。但是如果有人访问了这个 url ，并且输入的不是这三个路由之一，我想要将他直接引导到一个通用的页面，显示页面未找到。如何在 Vue.js 中实现这一点？

- margherita pizza

---

{ path: '', component: something } 或 { path: '', redirect: '/' }。你可能认为这是一个非常常见的用例，他们会在基本示例或文档中至少提到一下，但是他们只有在文档中提供了一个链接：https://github.com/pillarjs/path-to-regexp#parameters（来自高级匹配模式）。我相信路由的顺序很重要，将回退路由放在最后。 - ippi

非常感谢，它起作用了！ - margherita pizza

Answer 1

对于Vue2：在您的路由配置对象底部使用路由器通配符语法。

{
    path :'*',
    component:NotFound
}

如果顶部没有匹配的路由，则此操作将引导用户到组件NotFound，因此您的路由配置可以如下所示：

import Vue from 'vue';
import VueRouter from 'vue-router';
import welcome from './components/welcome.vue';
import restaurant from './components/restaurant.vue';
import eatMe from './components/eat-me.vue';
import NotFound from '../components/NotFound'
Vue.use(VueRouter);

const routes = [{
    path: '/',
    component: welcome,
    name: welcome
}, {
    path: '/restaurant',
    component: restaurant
}, {
    path: '/eat-me',
    component: eatMe
}, {
    path :'*',
    component:NotFound
  }
]

const router = new VueRouter({
    routes,
    mode: 'history'
});

export default router;

针对Vue3：查看Aman在此处的答案 https://dev59.com/CFUL5IYBdhLWcg3wCEMA#64817425

- mostafa tourad

---

对于Vue 3，请参考Aman Dalmia的答案。 - elliotching

@elliotching 我已经做了，谢谢。 - mostafa tourad

Answer 2

如此答案中提到的，*在Vue 3中不再起作用。只需替换为：

{
    path: '*',
    component: NotFound
}

随着

{
    path: '/:pathMatch(.*)*',
    component: NotFound
}

- Aman Dalmia

Answer 3

如果您想重定向到出现URL /页面未找到的位置，请创建该路径，然后在用户输入不存在的URL时将其重定向到该路径。

您应该将此添加到routes.js中。

你应该在routes.js中添加这个。

{ path: '/page-not-found',
    components: {
        default: PageNotFound //Vue component
    },
},
{ path: '*', redirect: '/page-not-found' }

或者

{ path: '/page-not-found',
    component: PageNotFound //Vue component
},
{ path: '*', redirect: '/page-not-found' }

- AythaNzt