欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年12月07日 09:36:28   作者：馬可家的菠蘿  
在 Vue3 中,可以使用 Vue Router 實現(xiàn)跳轉(zhuǎn)到 404 頁面,即當(dāng)用戶訪問一個不存在路由時,系統(tǒng)會默認跳轉(zhuǎn)到 404 頁面,本文給大家介紹了一個簡單的實現(xiàn)方法,需要的朋友可以參考下

前言

在 Vue3 中，可以使用 Vue Router 實現(xiàn)跳轉(zhuǎn)到 404 頁面，即當(dāng)用戶訪問一個不存在路由時，系統(tǒng)會默認跳轉(zhuǎn)到 404 頁面。以下是一個簡單的實現(xiàn)方法：

圖例

404頁面文件

在項目的根目錄下創(chuàng)建一個名為 404.vue 的文件，用于編寫 404 頁面。在 404.vue 文件中，你可以添加自定義的組件和內(nèi)容。例如：

<template>
  <div>
    <h1>404 頁面不存在</h1>
    <p>您訪問的頁面不存在，請返回 <router-link to="/">首頁</router-link></p>
  </div>
</template>
 
<script>
export default {
  name: 'NotFound',
}
</script>

路由配置 

1、首先，確保你已經(jīng)安裝了 Vue Router。如果沒有，請使用以下命令進行安裝：

npm install vue-router@next --save

2、在項目的 src 目錄下創(chuàng)建一個名為 router 的文件夾，用于存放路由配置。在 router 文件夾中創(chuàng)建一個名為 index.js 的文件，用于配置路由。

3、在 index.js 文件中，首先導(dǎo)入 createRouter、createWebHistory 和 RouteRecordRaw 方法，然后定義一個名為 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、在項目的入口文件 main.js 中，引入并使用路由配置。例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

實現(xiàn)原理

關(guān)鍵實現(xiàn)是 '/:catchAll(.*)'。在 Vue Router 中，:catchAll 是一個特殊字符，它用于匹配所有的路徑。當(dāng)你在路由配置中使用 :catchAll 時，它表示匹配所有無法被其他路由規(guī)則匹配的路徑。因此，當(dāng)訪問的路由不存在時，就會總動跳轉(zhuǎn)到路由path為'/:catchAll(.*)'的頁面。

以上就是Vue實現(xiàn)當(dāng)訪問的路由不存在時跳轉(zhuǎn)到404頁面的方法詳解的詳細內(nèi)容，更多關(guān)于Vue路由不存在跳轉(zhuǎn)404的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論