Vue-Router 命名路由回退

Posted 2023-02-23

【中文标题】Vue-Router 命名路由回退

【英文标题】：Vue-Router named route fallback

【发布时间】：2021-09-19 19:02:55

【问题描述】：

我正在用 VueJS 和 Vue-Router 构建一个项目。 尽管它运行良好，但我想知道当找不到 named 路由时是否有后备选项。 我确实有一个 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 组件在这种情况下也能正常工作？

【参考方案1】：

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

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