Vue router是一個用于Vue.js的官方路由管理器。它可以讓你創(chuàng)建基于組件的單頁面應用，實現(xiàn)不同的URL對應不同的視圖。在本文中，我將介紹vue router的基本用法和一些高級特性。
首先，你需要安裝vue router并在你的項目中引入它。你可以使用npm或yarn來安裝：
npm install vue-router
# 或者
yarn add vue-router然后，你需要在你的main.js文件中導入vue router并使用它：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
// 創(chuàng)建一個路由對象
const router = new VueRouter({
// 定義路由規(guī)則
routes: [
// 每個路由規(guī)則是一個對象，包含path和component兩個屬性
{
path: '/', // URL路徑
component: Home // 對應的組件
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})
// 創(chuàng)建一個Vue實例，并掛載到#app元素上
new Vue({
el: '#app',
router, // 將路由對象注入到Vue實例中
render: h => h(App)
})
這樣，你就創(chuàng)建了一個基本的vue router應用。當你訪問不同的URL時，你會看到不同的組件渲染在頁面上。例如，當你訪問/about時，你會看到About組件。
但是，這還不夠。你可能還想要實現(xiàn)一些更復雜的功能，比如嵌套路由、動態(tài)路由、導航守衛(wèi)、路由元信息等。下面，我將簡單介紹這些特性，并給出一些示例代碼。
嵌套路由是指在一個路由下面再定義子路由，以實現(xiàn)多級導航的效果。例如，假設你有一個User組件，它有兩個子組件：Profile和Posts。你想要在User組件下面顯示這兩個子組件，并且可以通過/user/profile和/user/posts來訪問它們。那么，你可以這樣定義嵌套路由：
// 在routes數(shù)組中添加一個嵌套路由規(guī)則
{
path: '/user',
component: User,
// 在children屬性中定義子路由規(guī)則
children: [
{
path: 'profile', // 注意這里不需要加斜杠
component: Profile
},
{
path: 'posts',
component: Posts
}
]
}
然后，在User組件中，你需要使用
<template>
<div class="user">
<h1>User</h1>
<!-- 這里會根據(jù)子路由規(guī)則渲染對應的組件 -->
<router-view></router-view>
</div>
</template>
動態(tài)路由是指在路由路徑中使用參數(shù)來匹配不同的值，以實現(xiàn)動態(tài)的視圖切換。例如，假設你有一個Post組件，它可以顯示不同的文章內容。你想要通過/post/:id來訪問不同的文章，其中:id是一個參數(shù)。那么，你可以這樣定義動態(tài)路由：
// 在routes數(shù)組中添加一個動態(tài)路由規(guī)則
{
path: '/post/:id', // 使用冒號來表示參數(shù)
component: Post
}
然后，在Post組件中，你可以使用this.$route.params.id來獲取參數(shù)的值，并根據(jù)它來顯示不同的內容：
<template>
<div class="post">
<h1>Post {{ $route.params.id }}</h1>
<!-- 這里可以根據(jù)參數(shù)的值來顯示不同的內容 -->
<p>{{ content }}</p>
</div>
</template>導航守衛(wèi)是一些函數(shù)，它們可以在路由跳轉前后執(zhí)行一些邏輯，比如驗證用戶身份、修改頁面標題、取消未完成的請求等。vue router提供了全局、單個路由和組件內的三種導航守衛(wèi)。下面，我將以全局導航守衛(wèi)為例，介紹它們的用法。
全局導航守衛(wèi)是指在每次路由跳轉前后都會執(zhí)行的函數(shù)。你可以在創(chuàng)建路由對象時，使用beforeEach和afterEach方法來注冊全局導航守衛(wèi)：
// 創(chuàng)建一個路由對象
const router = new VueRouter({
// 省略其他代碼
})
// 注冊一個全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
// to: 即將要進入的目標路由對象
// from: 當前導航正要離開的路由對象
// next: 一個函數(shù)，必須調用它來解析鉤子
// 這里可以執(zhí)行一些邏輯，比如驗證用戶身份
if (to.meta.requiresAuth) {
// 如果目標路由需要驗證身份
if (isAuthenticated()) {
// 如果已經登錄，放行
next()
} else {
// 如果未登錄，跳轉到登錄頁面
next('/login')
}
} else {
// 如果目標路由不需要驗證身份，放行
next()
}
})
// 注冊一個全局后置鉤子
router.afterEach((to, from) => {
// to: 即將要進入的目標路由對象
// from: 當前導航正要離開的路由對象
// 這里可以執(zhí)行一些邏輯，比如修改頁面標題
document.title = to.meta.title || 'Vue Router'
})
路由元信息是指在路由規(guī)則中定義的一些自定義數(shù)據(jù)，它們可以用來存儲一些與路由相關的信息，比如頁面標題、是否需要驗證身份等。你可以在每個路由規(guī)則中使用meta屬性來定義路由元信息：
// 在routes數(shù)組中添加一個帶有元信息的路由規(guī)則
{
path: '/login',
component: Login,
// 在meta屬性中定義元信息
meta: {
title: 'Login',
requiresAuth: false
}
}
然后，在導航守衛(wèi)或組件中，你可以使用to.meta或this.$route.meta來訪問元信息：
// 在全局前置守衛(wèi)中訪問元信息
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// ...
}
})
// 在組件中訪問元信息
export default {
mounted() {
console.log(this.$route.meta.title)
}
}以上就是我對vue router的簡單介紹。
前端開發(fā)相關課程推薦：前端開發(fā)相關課程
