vue+router 404页面制作

Posted 2023-01-30

---

(文章目录)

---

效果

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

---

一、创建404界面

<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)

---