vue路由未匹配到路由跳转到指定404页面的两种常见方法

方法一：

通过vue-router重定向实现

在src/router/index.js中

方法二：

通过导航守卫实现

在src/router/index.js中

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

...

const router = new Router({

  mode: 'history', // 'history'

  routes: [

    {

      path: '/',

      name: 'home',

      component: business

    },...

]

})

router.beforeEach((to, from, next) => {

  if (to.matched.length === 0) { // 如果未匹配到路由

    next('/404') 

  } else {

    next() // 如果匹配到正确跳转

  }

})

export default router