快捷導(dǎo)航

Vue實(shí)現(xiàn)當(dāng)訪問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解

更新時(shí)間：2023年12月07日 09:36:28 作者：馬可家的菠蘿

在 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)方法,需要的朋友可以參考下

前言

在 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 的文件，用于編寫(xiě) 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)文章！

您可能感興趣的文章: