如何正确处理不存在的命名路由？答案

【问题标题】：How to properly handle non-existent named route?如何正确处理不存在的命名路由？
【发布时间】：2019-12-31 03:02:45
【问题描述】：

我在我的项目中使用 Vue 路由器。当我链接到名称不存在的路由时，例如：

<router-link :to="{ name: 'test-route' }"> link </router-link>

Vue 在控制台中抱怨说：

[vue-router] 名为“test-route”的路由不存在

但是用户没有任何反应表明有问题。地址栏被更改为根路由（只是/），但没有实际显示主页，并且我的router.onError 处理程序（通常在您失去连接时处理尝试导航到延迟加载的组件）不会触发这个案例。

我想在屏幕上显示有问题，如果没有其他问题，重定向到我的 404 页面。

【问题讨论】：

【解决方案1】：

我的建议 - 如果链接无效，则不允许点击链接，您可以在 v-on 指令中设置条件。
v-on="{ to: <does link exist (access router)> ? { name: 'test-route' } : null}"。
可能需要一些语法修复，但这是一般的想法。

【讨论】：