当路由器 link 在 vuejs 中不存在时重定向到一个页面

Question

路由器链接定义如下：

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

当定义的链接以外的链接被调用时，如 '/contact'，必须将其重定向到 '/'。除了像我们在 angular 路线中使用 .otherwise 那样的导航守卫之外，还有其他方法吗？

Answer 1

在 routconfig 数组中添加 {path: '*', component: () => import('../views/PageNotFound.vue')}，其中 PageNotFound 只是另一个组件。您可以在 PageNotFound 组件中添加任何您喜欢的东西，或者将其命名为其他名称。将其添加为数组中的最后一个元素

当路由器 link 在 vuejs 中不存在时重定向到一个页面

Redirect to a page when router link does not exist in vuejs

navigation

routes

vue.js

vue-router

vuex