在Vue3中，路由的基本配置是通過使用Vue Router庫來實作的，以下是Vue3中路由的基本配置步驟：
- 安裝Vue Router
使用npm或yarn在專案中安裝Vue Router：
npm install vue-router // 或者 yarn add vue-router
- 創建路由實體
創建一個路由實體并定義路由規則，路由規則是一個物件陣列，其中每個物件都定義了一個路由的路徑和組件，
例如，以下代碼定義了兩個路由規則：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在這個例子中，我們匯入了createRouter和createWebHistory函式，createRouter函式用于創建路由實體，createWebHistory函式用于指定路由的歷史記錄模式，我們還定義了兩個路由規則：一個路由規則對應路徑'/'，另一個對應路徑'/about'，這些路由規則將路由到Home和About組件，
在 Vue Router 中，routes 是一個陣列，用于定義路由規則，每個路由規則都包含了如下屬性：
path：一個字串，表示路徑，可以包含動態片段和引數（如/users/:id），name：一個字串，表示路由的名稱，方便在代碼中參考，component：一個組件，表示該路由對應的視圖組件，components：一個物件，表示該路由對應的多個視圖組件，redirect：一個字串或者一個函式，表示路由重定向的目標，可以是一個路徑或者是一個具有to屬性的物件，alias：一個字串或者一個陣列，表示路由的別名，訪問別名等同于訪問路由本身，meta：一個物件，表示該路由的元資訊，用于存盤一些額外的資訊（如頁面標題、是否需要登錄等），
除了上述常用屬性之外，還有一些其他的屬性用于更高級的路由管理，例如：
beforeEnter：一個函式，表示路由獨享的守衛，用于在路由切換前執行一些操作，props：一個布林值或者一個函式，表示是否將組件的props屬性和 URL 引數映射到組件的 props 屬性中，或者自定義如何映射，caseSensitive：一個布林值，表示該路由是否區分大小寫，默認為 false，pathToRegexpOptions：一個物件，用于配置 path-to-regexp 庫的選項，children：一個陣列，表示該路由的子路由，用于實作嵌套路由，
路由規則可以通過一個物件或者一個陣列來定義，例如：
// 定義單個路由規則 const homeRoute = { path: '/', name: 'Home', component: Home } // 定義多個路由規則 const routes = [ { path: '/', name: 'Home', component: Home //組件名方式加載
}, { path: '/about', name: 'About',
component: () => import("../views/AboutView.vue"),// 懶加載
meta: { requiresAuth: true } } ]
在 Vue Router 中，可以使用兩種不同的 history 模式：hash 和 history，
-
createWebHashHistory()：使用 URL 的 hash（即 URL 中的#）來模擬一個完整的 URL，這種模式的優點是在不支持 HTML5 History API 的瀏覽器中也可以正常使用，缺點是 URL 比較丑陋，不利于 SEO， -
createWebHistory()：使用 HTML5 History API 來實作路由，URL 是真實的 URL，不需要#符號，這種模式的優點是 URL 更加美觀，不會出現#符號，缺點是需要瀏覽器支持 HTML5 History API，如果不支持則會出現兼容性問題，
在創建路由器實體時，需要通過 createWebHashHistory() 或者 createWebHistory() 函式來創建一個 history 物件，例如：
const router = createRouter({
// 使用 history 模式
history: createWebHistory(),
routes,
});
const router = createRouter({
// 使用 hash 模式
history: createWebHashHistory(),
routes,
});
在 Vue 中，可以使用 <router-view> 標簽來承載路由，<router-view> 標簽會根據當前的路由資訊動態渲染對應的組件，例如：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
在這個例子中，<router-view> 標簽承載路由，并在當前路由地址對應的組件中動態渲染內容，當用戶點擊鏈接切換路由時，<router-view> 標簽會自動更新并渲染新的組件，
需要注意的是，一個 Vue 應用只能有一個根組件，因此 <router-view> 標簽通常是在根組件中使用，在其他組件中，可以通過 name 屬性來指定具名視圖的名稱，從而在同一個組件中承載多個視圖，
<template>
<div>
<router-view></router-view>
<router-view name="sidebar"></router-view>
</div>
</template>
在這個例子中，根組件中有兩個 <router-view> 標簽，一個用于承載默認視圖，另一個用于承載名為 sidebar 的具名視圖，在路由配置中，可以通過 components 屬性來指定多個組件作為具名視圖的內容，
const router = new VueRouter({ routes: [ { path: '/', components: { default: Home, sidebar: Sidebar } } ] })
在這個例子中，路由地址為 / 的路由將同時渲染 Home 組件和 Sidebar 組件，其中，Home 組件將被渲染到默認視圖中，Sidebar 組件將被渲染到名為 sidebar 的具名視圖中，
- 集成路由實體
將路由實體集成到Vue應用程式中，這可以在應用程式的根組件中完成，
例如，以下代碼將路由實體集成到根組件中：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');
</script>
在這個例子中，我們使用createApp函式創建一個Vue應用程式實體，并使用use方法將路由實體集成到應用程式中，我們還在模板中使用了router-view組件來渲染當前路由所匹配的組件，
- 創建路由鏈接（跳轉路由）
在 Vue.js 3.x 中，跳轉路由的方法和 Vue.js 2.x 略有不同，以下是幾種常見的跳轉路由的方法：
- 使用
<router-link>標簽
在模板中使用 <router-link> 標簽可以生成一個路由鏈接，并且當用戶點擊該鏈接時，自動跳轉到相應的路由，例如：
<router-link to="/about">Go to About</router-link>
在這個例子中，使用 <router-link> 標簽生成了一個鏈接，點擊該鏈接將跳轉到 /about 路由，
例如app.vue代碼顯示如何使用<router-link>組件創建鏈接：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
在這個例子中，我們使用<router-link>組件創建兩個鏈接：一個指向路由'/'，另一個指向路由'/about'，
這是一個簡單的Vue3中基本路由配置的示例，可以通過定義更多的路由規則和使用更多的Vue Router功能來擴展它，
- 使用
$router物件
在組件中，可以通過 $router 物件訪問當前應用的路由實體，并使用其提供的方法跳轉到其他路由，例如：
export default { methods: { goToAbout() { this.$router.push('/about') } } }
在這個例子中，使用 $router.push 方法跳轉到 /about 路由，
- 使用
useRouter方法
在 Vue.js 3.x 中，可以使用 useRouter 方法獲取路由實體，并使用其提供的方法跳轉到其他路由，
useRouter 是 Vue Router 4.x 中的一個新特性，用于在組件中訪問路由實體，在 Vue Router 4.x 中，可以使用 createRouter 方法創建路由實體，并通過 provide/inject 或 app.config.globalProperties 將其注入到 Vue 實體中，然后，在組件中，可以使用 useRouter 方法訪問注入的路由實體，
useRouter 方法是一個 Vue 3.x 中的 Composition API 方法，需要使用 import { useRouter } from 'vue-router' 引入，例如：
<template>
<div>
<h1>Home</h1>
<button @click="handleClick">Go to About</button>
</div>
</template>
<script>
import { defineComponent, useRouter } from 'vue'
export default defineComponent({
setup() {
const router = useRouter()
const handleClick = () => {
//push一個url地址
router.push('/about')
//push一個物件
//router.push(name:'about')
} return { handleClick } } }) </script>
在這個示例中，使用了 <template> 標簽包裹了模板，其中包括一個標題和一個按鈕，當按鈕被點擊時，呼叫 handleClick 方法，該方法使用 useRouter 方法獲取了當前組件所在的路由實體，然后調用 push 方法跳轉到路由 /about，
需要注意的是，這個示例中使用了 Vue.js 3.x 的 Composition API，因此需要使用 import { defineComponent, useRouter } from 'vue' 引入組件和路由實體，并使用 defineComponent 定義組件，
特別注意：
push可以換成replace，但是意義不同，
push 方法用于在路由堆疊中添加新路由記錄，而 replace 方法用于替換當前路由記錄，因此可以使用 replace 方法進行路由跳轉，例如：
<template> <button @click="handleClick">Go to About</button> </template> <script> import { defineComponent, useRouter } from 'vue' export default defineComponent({ setup() { const router = useRouter() const handleClick = () => { router.replace('/about') } return { handleClick } } }) </script>
需要注意的是，使用 replace 方法進行路由跳轉會替換當前路由記錄，因此用戶無法通過瀏覽器的后退按鈕回傳到上一個路由，如果需要保留當前路由記錄并添加新的路由記錄，應該使用 push 方法，
vue3中的其他跳轉，例如：后退、前進
在 Vue.js 3.x 中，可以使用路由實體提供的 back 和 forward 方法實作后退和前進的功能，具體來說，back 方法將用戶導航到前一個歷史記錄條目，而 forward 方法將用戶導航到下一個歷史記錄條目，例如：
// 使用 $router 物件 export default { methods: { goBack() { this.$router.back() }, goForward() { this.$router.forward() } } } // 使用 useRouter 方法 import { defineComponent, useRouter } from 'vue' export default defineComponent({ setup() { const router = useRouter() const goBack = () => { router.back() } const goForward = () => { router.forward() } return { goBack, goForward } } })
需要注意的是，使用 back 和 forward 方法進行導航時，需要確保用戶在瀏覽器中已經瀏覽了足夠多的歷史記錄，否則這些方法可能會無法正常作業，另外，這些方法也可能會因為瀏覽器的不同而表現不同，
前進后退使用go實作
在 Vue.js 3.x 中，也可以使用路由實體提供的 go 方法實作前進和后退的功能，該方法接受一個整數引數 n，表示前進或后退的步數，當 n 為正數時，代表前進，而當 n 為負數時，代表后退，例如：
// 使用 $router 物件 export default { methods: { goBack() { this.$router.go(-1) }, goForward() { this.$router.go(1) } } } // 使用 useRouter 方法 import { defineComponent, useRouter } from 'vue' export default defineComponent({ setup() { const router = useRouter() const goBack = () => { router.go(-1) } const goForward = () => { router.go(1) } return { goBack, goForward } } })
需要注意的是，使用 go 方法進行導航時，需要確保當前路由在瀏覽器的歷史記錄中已經存在足夠多的條目，否則這些方法可能會無法正常作業，同時，這些方法也可能會因為瀏覽器的不同而表現不同，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550463.html
標籤：其他