vuejs2 - How to properly handle non-existent named route?

Question

I am using the Vue Router in my project. When i link to a route whose name does not exist, so for example:

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

Vue complains in the console saying:

[vue-router] Route with name 'test-route' does not exist

But nothing happens to the user to indicate that something is wrong. The address bar gets changed to the root route (just /), but without the homepage actually showing, and my router.onError handler (which usually handles trying to navigate to lazy loaded components when you lose connection) doesn't fire in this case.

I want to show on screen that something is wrong, a redirection to my 404 page if nothing else.

标签： vuejs2vue-router

Answer 1

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