一文詳解Vue Router的使用和路由守衛(wèi)
Vue Router 是 Vue.js 的官方路由庫，用于在 Vue 應用中實現(xiàn)單頁面應用（SPA）的客戶端路由。它使得 Vue 應用能夠在不重新加載頁面的情況下實現(xiàn)不同的視圖和狀態(tài)切換。以下是 Vue Router 的詳細介紹，包括基本概念、配置、路由導航以及高級用法。
1 基本概念
路由 (Route): 路由是 URL 與 Vue 組件之間的映射關系。每個路由配置關聯(lián)一個視圖組件。
路由表 (Router Table): 路由表是一個數(shù)組，定義了路由的配置。每個路由配置項包括路徑、組件及其他參數(shù)。
路由實例 (Router Instance): 一個 Vue Router 實例，負責管理路由配置、導航和路由狀態(tài)。
路由視圖 (Router View): 一個 Vue 組件，作為路由組件的容器，渲染與當前路由匹配的組件。
- - 安裝
首先，安裝 Vue Router：
npm install vue-router
- 配置和使用
創(chuàng)建路由實例
創(chuàng)建一個 router/index.js 文件，定義路由配置并創(chuàng)建路由實例：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
- 在 Vue 應用中使用路由
在 main.js 文件中導入路由實例，并將其傳遞給 Vue 應用：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
- 使用路由視圖
在應用的主組件 App.vue 中，使用 組件來顯示當前路由匹配的組件：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
2 路由導航
- 編程式導航
使用 Vue Router 提供的 router 實例進行編程式導航：
// 在組件中
this.$router.push('/about');
// 或
this.$router.replace('/home');
還可以使用 router 實例的 push 和 replace 方法：
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
function navigateToAbout() {
router.push('/about');
}
return { navigateToAbout };
}
}
- 聲明式導航
使用 組件實現(xiàn)聲明式導航：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>
3 路由守衛(wèi)
路由守衛(wèi)是 Vue Router 提供的一種功能，允許開發(fā)者在路由的進入、離開和變化過程中進行控制和處理。通過使用路由守衛(wèi)，可以在用戶導航到不同的路由時執(zhí)行特定的操作，例如驗證用戶權(quán)限、處理數(shù)據(jù)加載等。Vue Router 提供了全局守衛(wèi)、路由獨享守衛(wèi)和組件內(nèi)守衛(wèi)三種類型的守衛(wèi)。
1. 全局守衛(wèi)
全局守衛(wèi)是在路由實例上定義的，適用于所有的路由。它們在路由變化時被調(diào)用。
- beforeEach: 在路由導航開始之前調(diào)用，可以用于處理路由訪問權(quán)限等操作。
router.beforeEach((to, from, next) => {
console.log('Global beforeEach');
// 判斷是否需要登錄
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login'); // 沒有權(quán)限，重定向到登錄頁
} else {
next(); // 允許導航
}
});
- afterEach: 在路由導航結(jié)束之后調(diào)用，可以用于執(zhí)行一些不影響導航的操作，例如記錄日志。
router.afterEach((to, from) => {
console.log('Global afterEach');
// 可用于執(zhí)行一些操作，例如更新頁面標題
document.title = to.meta.title || 'Default Title';
});
- beforeResolve: 在路由解析完且所有組件內(nèi)守衛(wèi)和異步路由組件都已解析之后調(diào)用。適合進行需要在導航完成前進行的操作。
router.beforeResolve((to, from, next) => {
console.log('Global beforeResolve');
next();
});
2. 路由獨享守衛(wèi)
路由獨享守衛(wèi)是配置在特定路由中的，只有在匹配到該路由時才會觸發(fā)。
- beforeEnter: 在路由進入之前調(diào)用，與全局 beforeEach 類似，但僅針對特定路由。
const routes = [
{
path: '/profile',
component: Profile,
beforeEnter: (to, from, next) => {
console.log('Route beforeEnter');
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
}
}
];
3. 組件內(nèi)守衛(wèi)
組件內(nèi)守衛(wèi)是定義在 Vue 組件內(nèi)部的，專用于該組件的路由守衛(wèi)。
- beforeRouteEnter: 在路由進入之前調(diào)用，此時組件實例尚未被創(chuàng)建。通過 next 函數(shù)獲取組件實例。
export default {
name: 'Profile',
beforeRouteEnter(to, from, next) {
console.log('Component beforeRouteEnter');
// 可以獲取到組件實例
next(vm => {
console.log('Component instance:', vm);
});
}
}
- beforeRouteUpdate: 當路由在同一個組件中變化時調(diào)用（例如在動態(tài)路由中），用于處理更新。
export default {
name: 'Profile',
beforeRouteUpdate(to, from, next) {
console.log('Component beforeRouteUpdate');
// 處理路由更新邏輯
next();
}
}
- beforeRouteLeave: 當離開當前路由時調(diào)用，用于處理離開前的操作，例如確認對話框。
export default {
name: 'Profile',
beforeRouteLeave(to, from, next) {
console.log('Component beforeRouteLeave');
// 確認離開操作
if (confirm('Do you really want to leave?')) {
next();
} else {
next(false); // 取消導航
}
}
}
4 動態(tài)路由和嵌套路由
- 動態(tài)路由匹配
使用 : 來定義動態(tài)參數(shù)：
const routes = [
{ path: '/user/:id', component: User }
];
在組件中通過 this.$route.params 訪問動態(tài)參數(shù)：
javascript
export default {
computed: {
userId() {
return this.$route.params.id;
}
}
}
- 嵌套路由
在路由配置中定義嵌套路徑：
const routes = [
{
path: '/profile',
component: Profile,
children: [
{ path: 'settings', component: ProfileSettings }
]
}
];
在 Profile 組件中使用 顯示子路由組件：
<template>
<div>
<h2>Profile</h2>
<router-view></router-view>
</div>
</template>
5 路由重定向和別名
- 重定向
路由重定向用于將訪問某一路徑的請求自動轉(zhuǎn)發(fā)到另一路徑。這對于簡化 URL 或引導用戶到正確的頁面非常有用。
示例
假設你希望將根路徑 (/) 重定向到 /home：
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
];
當用戶訪問根路徑時，他們會被自動重定向到 /home。
- 別名
路由別名允許你為一個路由配置多個路徑。使用別名可以提供不同的 URL 路徑來訪問相同的頁面。
示例假設你有一個 UserProfile 組件，且希望通過兩個不同的路徑訪問它：
const routes = [
{
path: '/user/:id',
component: UserProfile,
alias: '/profile/:id' // 使用別名
}
];
在這個示例中，訪問 /user/123 和 /profile/123 都會渲染 UserProfile 組件。
6 路由元信息
路由元信息是用來存儲與路由相關的自定義數(shù)據(jù)或信息的一個功能。這些信息不會直接影響路由的匹配，但可以用來在組件中進行條件渲染、權(quán)限控制等操作。
如何使用路由元信息
1. 定義元信息
在定義路由時，可以通過 meta 屬性來添加元信息。例如：
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, title: 'Admin Page' }
},
{
path: '/public',
component: Public,
meta: { title: 'Public Page' }
}
];
2. 訪問元信息
在組件中，可以通過 this.$route.meta 訪問這些元信息。例如：
export default {
name: 'MyComponent',
computed: {
pageTitle() {
return this.$route.meta.title || 'Default Title';
}
}
};
3. 使用元信息進行路由守衛(wèi)
可以在全局守衛(wèi)、路由守衛(wèi)中使用元信息來控制訪問權(quán)限或進行其他操作。例如：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
7 路由懶加載
路由懶加載是一種優(yōu)化策略，用于減少初始加載時間和提高應用性能。通過將路由組件按需加載，而不是一次性加載所有組件，可以加快應用的響應速度和啟動時間。
- 使用動態(tài)導入
使用 import() 函數(shù)來實現(xiàn)動態(tài)導入組件。在 Vue Router 中，可以將路由組件設置為懶加載的形式：
{
name: 'information',
path: '/information',
component: () => import('@/view/app/information/Main')
},
路由懶加載的好處
- 減少初始加載時間：只有在用戶訪問特定路由時，相關的組件才會被加載。
- 提高應用性能：減輕主線程負擔，提升用戶體驗。
- 按需加載：根據(jù)用戶的導航行為加載所需的組件，優(yōu)化資源使用。
結(jié)論
Vue Router 提供了豐富的功能來管理 Vue 應用中的路由。通過靈活配置路由、使用導航守衛(wèi)、動態(tài)路由以及嵌套路由等功能，可以創(chuàng)建功能強大且用戶體驗良好的單頁面應用。
相關文章
簡單實現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡單實現(xiàn)Vue的observer和watcher，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue中配置后端接口服務信息詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了vue中filter的應用場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue3使用pdf.js來預覽文件的操作步驟(本地文件測試)
這篇文章主要介紹了vue3使用pdf.js來預覽文件的操作步驟(本地文件測試),文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue watch監(jiān)聽數(shù)據(jù)變化的案例詳解
監(jiān)聽數(shù)據(jù)變化，在Vue中是通過偵聽器來實現(xiàn)的，你也可以將它理解為監(jiān)聽器，時刻監(jiān)聽某個數(shù)據(jù)的變化，本文將通過代碼示例為大家詳細的介紹一下vue watch如何監(jiān)聽數(shù)據(jù)變化,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個Vue中常用的v指令的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12