vue+router 404 page production

---

---

Effect

When accessing a page that does not exist, it will jump to the 404 page

---

1. Create a 404 interface

create errorpage.vue

errorpage.vue

<template>
  <div class="errorpage">
    <img src="@/assets/images/404.png" alt="" style="margin-top:10%">
    <h1>您访问的页面不存在，请查看网络连接是否正常，或查看地址输入是否正确!</h1>
    <h1>The page you visited does not exist Please check whether the network connection is normal or check whether the address input is correct !</h1>
    <el-button @click="toHome">返回首页</el-button>
  </div>
</template>

<script>
export default {
    
    
  methods:{
    
    
    toHome(){
    
    
      this.$router.push('/ship/workbench')
    }
  }
}
</script>

<style>
.errorpage{
    
    
  text-align: center;
}
.errorpage h1{
    
    
  margin: 10px;
  font-weight: 300;
}
</style>

Two, set the router

1. Add in 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

When all the routes set can not be found, it will go here

2. Mount router in main.js

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

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

---