(文章目录)

效果

当访问不存在的页面时则会跳转至404页面

一、创建404界面

创建errorpage.vue

errorpage.vue

二、设置router

1.在router中添加

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [
  {
    path:'*',
    name:'404',
    component:()=>import("views/error/errorpage.vue")
  }
]

//避免冗余导航到当前位置
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  routes
})

export default router

当设置的所有路由都找不到时则会走这里

2.main.js中挂载router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')