Vue實(shí)現(xiàn)當(dāng)訪問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解
前言
在 Vue3 中，可以使用 Vue Router 實(shí)現(xiàn)跳轉(zhuǎn)到 404 頁(yè)面，即當(dāng)用戶訪問(wèn)一個(gè)不存在路由時(shí)，系統(tǒng)會(huì)默認(rèn)跳轉(zhuǎn)到 404 頁(yè)面。以下是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法：
圖例
404頁(yè)面文件
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為 404.vue 的文件，用于編寫 404 頁(yè)面。在 404.vue 文件中，你可以添加自定義的組件和內(nèi)容。例如：
<template>
<div>
<h1>404 頁(yè)面不存在</h1>
<p>您訪問(wèn)的頁(yè)面不存在，請(qǐng)返回 <router-link to="/">首頁(yè)</router-link></p>
</div>
</template>
<script>
export default {
name: 'NotFound',
}
</script>路由配置
1、首先，確保你已經(jīng)安裝了 Vue Router。如果沒(méi)有，請(qǐng)使用以下命令進(jìn)行安裝：
npm install vue-router@next --save
2、在項(xiàng)目的 src 目錄下創(chuàng)建一個(gè)名為 router 的文件夾，用于存放路由配置。在 router 文件夾中創(chuàng)建一個(gè)名為 index.js 的文件，用于配置路由。
3、在 index.js 文件中，首先導(dǎo)入 createRouter、createWebHistory 和 RouteRecordRaw 方法，然后定義一個(gè)名為 routes 的數(shù)組，用于存放所有路由信息。例如：
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: () => import('@/views/home.vue'),
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component:() => import('@/views/Components/404.vue')
},
];
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
});
export default router;4、在項(xiàng)目的入口文件 main.js 中，引入并使用路由配置。例如：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')實(shí)現(xiàn)原理
關(guān)鍵實(shí)現(xiàn)是 '/:catchAll(.*)'。在 Vue Router 中，:catchAll 是一個(gè)特殊字符，它用于匹配所有的路徑。當(dāng)你在路由配置中使用 :catchAll 時(shí)，它表示匹配所有無(wú)法被其他路由規(guī)則匹配的路徑。因此，當(dāng)訪問(wèn)的路由不存在時(shí)，就會(huì)總動(dòng)跳轉(zhuǎn)到路由path為'/:catchAll(.*)'的頁(yè)面。
以上就是Vue實(shí)現(xiàn)當(dāng)訪問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue路由不存在跳轉(zhuǎn)404的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
Vue3中的動(dòng)態(tài)路由是一種高級(jí)功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過(guò)$route.params對(duì)象訪問(wèn),動(dòng)態(tài)路由通常用于構(gòu)建可配置性強(qiáng)、更具靈活性的應(yīng)用,本文詳細(xì)介紹了如何在vue3中實(shí)現(xiàn)動(dòng)態(tài)路由,需要的朋友可以參考下2024-07-07
下面小編就為大家分享一篇vue中v-for加載本地靜態(tài)圖片方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕增加一行的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue項(xiàng)目啟動(dòng)命令個(gè)人學(xué)習(xí)記錄
最近想要學(xué)習(xí)vue,正好看到資料,如何通過(guò)命令創(chuàng)建vue項(xiàng)目的方法,就留個(gè)筆記,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目啟動(dòng)命令的相關(guān)資料,需要的朋友可以參考下2023-02-02
詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度
這篇文章主要介紹了詳解如何提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
本文主要介紹了Vue3+TypeScript 常用代碼示例總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
虛擬DOM是一種用JavaScript對(duì)象來(lái)描述真實(shí)DOM的技術(shù),通過(guò)diff算法實(shí)現(xiàn)高效的DOM更新,提高頁(yè)面性能,Vue通過(guò)render函數(shù)和VNode實(shí)現(xiàn)虛擬DOM,結(jié)合diff算法減少DOM操作,提升用戶體驗(yàn)2024-12-12
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來(lái)越常見(jiàn),這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下2023-12-12