Vue-Router 命名路由回退

Question

我正在用 VueJS 和 Vue-Router 构建一个项目。虽然它运行良好，但我想知道当找不到 named 路由时是否有回退选项。我确实有一个 404 页面的包罗万象的路由，它在输入无效的 URL.

时按预期工作

const router = new Router({
  linkExactActiveClass: 'active',
  mode: 'history',
  routes: [
    {
      path: '*',
      components: {
        header: AppHeader,
        default: NotFound,
        footer: ContentFooter
      },
    },
  ]
});

但是，当无法找到命名路由器-link 中的组件时，用户只会看到一个完全空白的屏幕。例如，一个 router-link 有一个像这样的不存在的组件：

<router-link class="nav-link" :to="{ name: 'someNameHere' }">
    Click here!
</router-link>

导致空白屏幕并在控制台中记录警告 [vue-router] Route with name 'someNameHere' does not exist。

有没有办法让 catch-all/fallback 组件在这种情况下也能正常工作？

Answer 1

这是路由器作者的设计决定，因为这是一个开发错误。话虽如此，您可以使用路由守卫在导航到该路由之前检查该路由是否存在。类似于：

router.beforeEach((to, from, next) => {
  if (to.matched.length < 1) {
    next(false);
    router.push('/404');
  } else {
    next();
  }
});

Vue-Router 命名路由回退

Vue-Router named route fallback

vue.js

vue-router