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 并输入除这 3 条路线之外的其他内容，我想将他引导到一条公共路线，上面写着 找不到页面 。如何使用 vue.js

实现此目的

Answer 1

for 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;

for Vue3：查看来自 Aman 的答案

Answer 2

如果你想重定向到出现 url/page-not-found 的 url，你应该创建路径，然后在用户输入不存在的 url 时重定向到它。

您应该将此添加到您的 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' }

Answer 3

如回答中所述，* 不再适用于 Vue 3。只需替换：

{
    path: '*',
    component: NotFound
}

和

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

Vue.js 如果找不到路由，如何重定向到公共路由

Vue.js how to redirect to a common route if route isn't found

vue.js

vue-router

vuejs2