効果
存在しないページにアクセスすると404ページにジャンプします
1. 404インターフェースを作成する
errorpage.vueを作成する
エラーページ.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>
2、ルーターを設定する
1.ルーターを追加する
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でルーターをマウントする
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')