vue+router 404页面制作

---

(文章目录)

---

效果

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

---

一、创建404界面

创建errorpage.vue

errorpage.vue

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

二、设置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')

---