如果找不到路由，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

在路由器配置对象的底部使用路由器通配符语法

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

Answer 2

正如这个答案中提到的，*它不再适用于 Vue 3。只需替换：

{
    path: '*',
    component: NotFound
}

和

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

Answer 3

如果您想重定向到出现 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' }