vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題
更新時(shí)間：2024年03月06日 09:30:39 作者：小楊愛編程
這篇文章主要介紹了vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
開始準(zhǔn)備一個(gè)Error.vue展示錯(cuò)誤界面
<template>
<div class="border">
<el-result
icon="error"
title="404,出錯(cuò)了！"
sub-title="當(dāng)前地址無法解析,請返回!!!!!"
>
<template #extra>
<el-button type="primary" @click="goBack">返回</el-button>
</template>
</el-result>
</div>
</template><script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
const goBack = ()=>{
router.push("/index")
}
</script>
<style scoped>
.border{
width: 70%;
height: 500px;
background-color: white;
border-radius: 10px;
margin: 50px auto;
}
</style>配置好Error,vue界面的路由
const routes = [
//反饋界面
{ path: '/error', component: Error ,meta: {title: "出錯(cuò)了！當(dāng)前界面不存在"}},
//首頁
{ path: '/index', component: Index,meta: {title: "首頁"}},
]
const router = VueRouter.createRouter({
// 4. 內(nèi)部提供了 history 模式的實(shí)現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的縮寫
})
export default router配置router.beforeEach
router.beforeEach((to, from, next) => {//beforeEach是router的鉤子函數(shù)，在進(jìn)入路由前執(zhí)行
if (to.matched.length === 0 ){
next("/error")
}
})效果展示：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue 動態(tài)創(chuàng)建組件的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue 2源碼解析HTMLParserOptions.start函數(shù)方法
這篇文章主要為大家介紹了Vue 2源碼解析HTMLParserOptions.start函數(shù)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了深入Vue3中的Mock數(shù)據(jù)模擬實(shí)現(xiàn)細(xì)節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
本文主要介紹了element表格行列拖拽的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3路由進(jìn)階實(shí)戰(zhàn)教程之參數(shù)傳遞與導(dǎo)航守衛(wèi)核心技術(shù)
本文介紹了路由參數(shù)傳遞的進(jìn)階應(yīng)用技巧,包括路由配置與參數(shù)驗(yàn)證、組件參數(shù)接收、查詢參數(shù)傳遞、導(dǎo)航守衛(wèi)以及性能優(yōu)化與最佳實(shí)踐,感興趣的朋友一起看看吧2025-03-03
Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式
這篇文章主要介紹了Vue選項(xiàng)之propsData傳遞數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11