时间戳

首页 > 解决方案 > Vue-Router 命名路由回退

vue.js - Vue-Router 命名路由回退

问题描述

我正在用 VueJS 和 Vue-Router 构建一个项目。尽管它运行良好，但我想知道当找不到命名路由时是否有后备选项。我确实有一个 404 页面的包罗万象的路由，在输入无效 URL 时可以按预期工作。

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

但是，当找不到命名路由器链接中的组件时，用户只会看到一个完全空白的屏幕。例如，一个带有不存在组件的路由器链接，如下所示：

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

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

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

标签： vue.jsvue-router

解决方案

这是路由器作者的设计决定，因为这是一个开发错误。话虽如此，您可以在导航到它之前使用路由保护来检查路由是否存在。就像是：

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

推荐阅读