Vue-Router中命名路由不存在时的回退方案咨询

Great question! I’ve run into this exact issue before when working with Vue Router—your wildcard route works for manual URL entries, but it doesn’t catch invalid named route jumps via router-link or programmatic navigation. Let’s walk through a few solid solutions to fix this:

1. Use a Global Before Guard (Most Comprehensive) #

This approach intercepts all route navigation attempts and checks if the target named route actually exists. It covers both router-link clicks and programmatic calls like this.$router.push().

First, let’s clean up your router configuration to use a dedicated 404 route (this makes things more explicit than relying solely on the wildcard):

const router = new Router({
  linkExactActiveClass: 'active',
  mode: 'history',
  routes: [
    // Your other routes go here...
    { 
      path: '/404',
      name: 'NotFound',
      components: { 
        header: AppHeader, 
        default: NotFound, 
        footer: ContentFooter 
      },
    },
    // Redirect all unmatched paths to 404
    { path: '*', redirect: '/404' }
  ]
});

Then add the global beforeEach guard to check for valid named routes:

router.beforeEach((to, from, next) => {
  // Check if the target route name exists in our route config
  const routeExists = router.getRoutes().some(route => route.name === to.name);

  // If we're targeting a named route that doesn't exist (and we're not already going to NotFound)
  if (to.name && !routeExists && to.name !== 'NotFound') {
    // Redirect to our 404 route
    next({ name: 'NotFound' });
  } else {
    // Proceed with the normal navigation
    next();
  }
});

This will immediately redirect any invalid named route attempts to your 404 page, no blank screens included.

2. Create a Custom RouterLink Component #

If you want to catch invalid routes at the component level (before the click even triggers navigation), you can wrap router-link in a custom component that validates the target route first.

Create a CustomRouterLink.vue file:

<template>
  <router-link
    v-bind="$attrs"
    :to="validatedTo"
  >
    <slot></slot>
  </router-link>
</template>

<script>
export default {
  name: 'CustomRouterLink',
  props: {
    to: {
      type: [String, Object],
      required: true
    }
  },
  computed: {
    validatedTo() {
      // Check if we're using a named route
      if (typeof this.to === 'object' && this.to.name) {
        const routeExists = this.$router.getRoutes().some(r => r.name === this.to.name);
        // If the route doesn't exist, redirect to NotFound
        if (!routeExists) {
          return { name: 'NotFound' };
        }
      }
      // Return the original target if valid
      return this.to;
    }
  }
};
</script>

Register it globally in your main.js:

import CustomRouterLink from './components/CustomRouterLink.vue';
Vue.component('custom-router-link', CustomRouterLink);

Then use it in your templates instead of the standard router-link:

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

3. Use the Router onError Hook #

If you just want to handle the error after it occurs (and don’t mind the console warning), you can use Vue Router’s onError hook to catch the missing route error and redirect to 404:

router.onError((error) => {
  // Match the specific warning message from Vue Router
  if (/Route with name .* does not exist/.test(error.message)) {
    router.push({ name: 'NotFound' });
  }
});

This will fix the blank screen, but you’ll still see the warning in the console. It’s a quick fix, but the global guard approach is more clean and proactive.

Final Recommendation #

Go with the global beforeEach guard—it’s the most robust solution, covering all navigation scenarios (not just router-link). It ensures consistent behavior no matter how the invalid route is triggered.

内容的提问来源于stack exchange，提问作者Tim