前言

Vue Router是一個官方的Vue.js路由管理器，它與 Vue.js 核心深度集成，通過它可以輕松地為單頁應(yīng)用程序（SPA）提供路由管理和導(dǎo)航功能。今天我們就來聊一聊Vue 3中使用Vue Router的那些事兒。

安裝和配置Vue Router

安裝Vue Router

安裝Vue Router只需要在vue項目中打開終端，輸入如下命令即可安裝：

npm 方式安裝

npm install vue-router@4

yarn方式安裝

yarn add vue-router@4

配置Vue Router

為了便于我們后面代碼維護(hù)和管理，我們一般將路由相關(guān)的代碼統(tǒng)一放到一個文件夾中。因此，配置Vue Router的步驟如下：

• 在src文件夾新建一個router文件夾，在該文件夾下新建index.js文件
• 在index.js中引入vue-router中的createRouter 和 createWebHashHistory 方法，引入頁面文件

import { createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'

• 在index.js中定義一個routes數(shù)組，在里面定義路由規(guī)則

const routes = [
  {
    path:'/home',
    name:Home,
    component:Home
  },
  {
    path:'/about',
    component:About
  },
  {
    path:'/list',
    component:List
  },
  {
    path:'/detail',
    component:Detail
  },
  {
    path:'/',
    redirect:'/home'
  }
]

• 在index.js中使用createRouter創(chuàng)建路由實例，并配置路由模式和上面定義的路由規(guī)則

const router = createRouter({
  history:createWebHashHistory(),
  routes
})

• 在index.js的最后，使用export default 將上面創(chuàng)建的路由實例導(dǎo)出

export default router

• 注冊路由：在main.js中導(dǎo)入上面創(chuàng)建的路由文件，并使用app.use注冊路由

import router from './router'
const app = createApp(App)
app.use(router) //注冊路由
app.mount('#app')

• 在組件中使用路由組件
  在App.vue中使用<router-view>組件來渲染要顯示的組件，在Tabbar組件中使用<router-link>組件生成鏈接

App.vue組件中代碼

<template>
  <Title></Title>
  <router-view></router-view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue'; 
import Title from './components/Title.vue'; 

</script>
<style scoped>
</style>

Tabbar組件中代碼

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
  </div>
  
</template>
<script setup>
</script>
<style  scoped>
div {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
</style>

至此，我們就完成了路由的配置與搭建，運(yùn)行程序，刷新瀏覽器，可以看到頁面已經(jīng)可以正常跳轉(zhuǎn)，實現(xiàn)了路由功能。

雖然上面我們已經(jīng)實現(xiàn)了一個完整的路由場景搭建，但是我們還是要對Vue Router的基礎(chǔ)知識進(jìn)行深入的了解，方便我們更好的理解和使用Vue Router。下面對Vue Router中的一些基本概念進(jìn)行介紹。

Vue Router的基本概念

• 路由器：Vue Router 提供了一個路由器，用于管理應(yīng)用程序中的路由。Vue Router 實例化一個 Vue Router 對象，注冊路由規(guī)則，并以它為中心連接其他組件。

• 路由：路由是分發(fā)到不同組件的 URL 地址。在 Vue Router 中，路由通常是由 path 規(guī)則和相應(yīng)的組件定義的。當(dāng)瀏覽器的 URL 匹配到路由的 path 后，相應(yīng)的組件將會被加載到頁面中。路由的信息可以從 route 對象中獲取。

• 路由規(guī)則：路由規(guī)則是由 path、component、name、meta、props 等屬性組成的。其中，path 表示 URL 的路徑，component 表示要渲染的組件，name 表示路由名稱，meta 表示路由的元數(shù)據(jù)，props 表示路由 props 數(shù)據(jù)。路由規(guī)則可以注冊到 Vue Router 中。

• 導(dǎo)航守衛(wèi)：導(dǎo)航守衛(wèi)是在路由跳轉(zhuǎn)時執(zhí)行的鉤子函數(shù)，用于控制路由的訪問權(quán)限、處理路由跳轉(zhuǎn)前后的邏輯等。在 Vue Router 中，對于選項式 API，常用的導(dǎo)航守衛(wèi)有 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等；對于使用組合 API 和 setup 函數(shù)來編寫組件的，可以通過 onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。

Vue Router 的配置項介紹

我們在使用Vue Router 中的createRouter創(chuàng)建router對象時，其為我們提供了很多配置項，帶完整配置項的示例代碼如下：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [],
  scrollBehavior: () => ({ top: 0, left: 0 }),
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  parseQuery: null,
  stringifyQuery: null,
  fallback: true
})

上面代碼中各個配置項的含義如下：

• history：指定路由的 history 模式，目前支持 createWebHistory()和 createWebHashHistory()模式。

• routes：定義路由規(guī)則的數(shù)組，每一個路由規(guī)則都是一個對象，包含 path、name、component 和 meta 等屬性。

• scrollBehavior：指定路由切換時滾動行為的配置函數(shù)。該函數(shù)返回一個包含 x 和 y 屬性的對象，表示頁面跳轉(zhuǎn)后滾動的位置。

• linkActiveClass：指定激活狀態(tài)的鏈接的 class 名稱，默認(rèn)為 'router-link-active'。

• linkExactActiveClass：指定精確匹配的激活狀態(tài)的鏈接的 class 名稱，默認(rèn)為 'router-link-exact-active'。

• parseQuery 和 stringifyQuery：用于配置路由的查詢參數(shù)解析和序列化函數(shù)。通常情況下，我們不需要額外配置這兩個函數(shù)，因為 Vue Router 已經(jīng)提供了默認(rèn)的實現(xiàn)。

• fallback：用于配置是否開啟 HTML5 History 模式的回退機(jī)制。默認(rèn)值為 true，表示當(dāng)路由不匹配時，將自動回退到歷史記錄中的上一個路由。

上面的配置項中，我們一般只需要配置history和routes兩個選項就可以了，其它選項了解即可

routes中的配置項介紹

在 Vue Router 中，路由規(guī)則的配置是通過 routes 屬性來實現(xiàn)的。routes 屬性中常用的配置如下：

• name：路由規(guī)則的名字?？梢杂糜诰幊淌綄?dǎo)航和組件內(nèi)部的路由跳轉(zhuǎn)。

• path：路由的路徑，可以包含動態(tài)參數(shù)和正則表達(dá)式。例如，/user/:id 表示用戶頁面，:id 是一個動態(tài)參數(shù)。

• redirect：路由的重定向規(guī)則。例如，{ path: '/', redirect: '/home' } 表示路由根路徑的重定向。

• component：路由對應(yīng)的組件。可以是一個普通的組件類或異步加載的組件。

• children：當(dāng)前路由的子路由?？梢允且粋€路由規(guī)則數(shù)組，也可以是一個函數(shù)，動態(tài)生成路由規(guī)則。

• meta：路由的元信息，用于描述路由的一些額外信息。例如，路由是否需要登錄、權(quán)限鑒定等。

• components：路由對應(yīng)的多個命名視圖組件。

路由跳轉(zhuǎn)

通過Vue Router，我們可以通過router-link組件的to方法和使用router.push函數(shù)以編程方式兩種方法導(dǎo)航到路由。

使用 router-link組件

使用router-link組件實現(xiàn)路由跳轉(zhuǎn)，我們只需要將菜單按鈕使用router-link組件包裹，并在上面使用to方法即可進(jìn)行跳轉(zhuǎn)，示例代碼如下：

<div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
</div>

使用router.push函數(shù)

使用router.push函數(shù)以編程方式實現(xiàn)路由跳轉(zhuǎn)，我們只需要在普通按鈕上綁定click事件，并在事件中調(diào)用router.push()方法即可實現(xiàn)跳轉(zhuǎn)，示例代碼如下:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
    <button @click="gotoAbout"> 關(guān)于 </button>
  </div>
  
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {
  router.push('/about')
}
</script>

使用 router.push 方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，會回到之前的 URL。

事實上，當(dāng)我們點擊 <router-link> 時，Vue Router 內(nèi)部會調(diào)用這個方法，所以點擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...)

router.push()方法中的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。

// 字符串路徑
router.push('/users/eduardo')

// 帶有路徑的對象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

路由傳參

在Vue Router中，可以通過以下方式進(jìn)行路由傳參和獲取參數(shù)

• 通過路由路徑傳遞參數(shù)：在路由配置中使用動態(tài)路由匹配（Dynamic Route Matching），例如：

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]

在路由路徑中使用冒號表示參數(shù)，參數(shù)值會被放入route.params對象中。我們可以通過調(diào)用route.params獲取參數(shù)，如訪問地址為/detail/123，則我們可以通過route.params.id獲取值為"123"。

• 通過query參數(shù)傳遞參數(shù)：在路由跳轉(zhuǎn)時使用query參數(shù)，例如：

// 在組件中跳轉(zhuǎn)
router.push({
  path: '/detail',
  query: { id: 123 }
})

// 在模板中跳轉(zhuǎn)
<router-link to="/detail?id=123">Detail</router-link>

在路由中使用query參數(shù)時，參數(shù)值會被放入route.query對象中。我們可以通過route.query獲取參數(shù)。例如，訪問地址為/detail?id=123，則我們可以通過route.query.id獲取值為"123"。

• 在路由配置中通過props選項傳遞參數(shù)。例如：

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      props: { id: 123 }
    }
  ]

在組件中可以直接使用props接收參數(shù)

• 在路由配置中通過meta選項傳遞參數(shù)。例如：

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      meta: { id: 123 }
    }
  ]

在組件中可以通過route.meta獲取參數(shù)，

動態(tài)路由

動態(tài)路由是指將一個路由的一部分作為參數(shù)來構(gòu)建的路由。例如，如果我們要為每個用戶創(chuàng)建一個單獨的頁面，我們可以使用動態(tài)路由，創(chuàng)建一個路徑為/users/:userId的路由，其中:userId是一個參數(shù)。

動態(tài)路由在定義路由時使用冒號（:）來表示參數(shù)。定義動態(tài)路由需要使用path方式定義。例如，要定義一個動態(tài)路由，我們可以這樣寫：

{
  path: '/users/:userId',
  name: 'user',
  component: User
}

在上面的代碼中，路徑中的:userId表示一個參數(shù)，它可以從路由對象的params屬性中獲取。在組件中可以這樣讀取userId：

console.log(route.params.userId)

在使用動態(tài)路由時，Vue Router還支持使用可選的參數(shù)和正則表達(dá)式來定義路由。例如，可以這樣定義一個包含可選參數(shù)的動態(tài)路由：

{
  path: '/users/:userId/:postId?',
  name: 'post',
  component: Post
}

在上面的代碼中，路徑中的postId參數(shù)是可選的，我們在它后面加一個問號代表可選參數(shù)?，F(xiàn)在，如果路徑是/users/123，那么postId將是undefined；如果路徑是/users/123/456，那么postId將是456。

嵌套路由

嵌套路由允許我們在一個父級路由下嵌套多個子路由，從而形成更加復(fù)雜的頁面結(jié)構(gòu)。

要定義嵌套路由，我們可以在父級路由的routes數(shù)組中定義一個子路由對象數(shù)組，每個子路由對象都包含一個path和一個component屬性，表示當(dāng)前子路由的訪問路徑和對應(yīng)的組件。同時，我們還可以在子路由對象中定義子路由的子路由，從而形成嵌套的路由結(jié)構(gòu)。

我們使用配置項children表示路由的嵌套關(guān)系，如下示例代碼：

const routes = [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'about',
          component: About
        },
        {
          path: 'contact',
          component: Contact
        }
      ]
    }
  ]

在上面的代碼中，我們定義了一個名為Home的組件作為父級路由的組件，并在children數(shù)組中定義了兩個子路由：About和Contact。這樣，當(dāng)用戶訪問/about或/contact時，Vue Router 就會渲染對應(yīng)的子組件，并將其嵌套在Home組件內(nèi)。

命名路由

命名路由可以為路由設(shè)置一個名稱，以便在代碼中進(jìn)行引用和跳轉(zhuǎn)。使用命名路由可以讓代碼更加清晰易懂，尤其是在需要跳轉(zhuǎn)到具有動態(tài)參數(shù)的路由時。

要定義命名路由，我們可以在路由對象中使用name屬性來指定路由的名稱，例如：

const routes = [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]

在上面的代碼中，我們?yōu)槿齻€路由分別指定了名稱：home、about和user。然后，在代碼中，我們可以通過這些名稱來生成對應(yīng)的路由鏈接或路由跳轉(zhuǎn)，例如：

<router-link :to="{name: 'home'}">Home</router-link>

<router-link :to="{name: 'about'}">About</router-link>

<router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>

router.push({name: 'home'})

router.push({name: 'user', params: {id: '456'}})

在上面的代碼中，我們分別使用了<router-link>組件和router.push()方法來跳轉(zhuǎn)到具有命名路由的路由。其中，使用params屬性可以動態(tài)指定路由中的參數(shù)。

命名路由在需要動態(tài)傳遞參數(shù)的情況下使用非常方便。

路由守衛(wèi)

路由守衛(wèi)是一種函數(shù)，在路由的各個階段被調(diào)用，可以用于攔截路由的訪問或?qū)β酚蛇M(jìn)行一些操作。我們可以使用路由守衛(wèi)來控制路由的跳轉(zhuǎn)和訪問權(quán)限。

在路由守衛(wèi)中，我們通常會用到三個參數(shù)：to、from和next。

• to：表示即將要跳轉(zhuǎn)的目標(biāo)路由對象，包含路由的路徑、參數(shù)和查詢字符串等信息。

• from：表示當(dāng)前路由對象，即正在離開的路由對象。

• next：是一個函數(shù)，用于進(jìn)行路由控制和跳轉(zhuǎn)。當(dāng)調(diào)用next函數(shù)時，路由會繼續(xù)向下執(zhí)行。我們可以通過next函數(shù)來控制路由的行為，例如渲染組件、跳轉(zhuǎn)路由、取消操作等。

幾種使用next函數(shù)的情況

• next(): 表示繼續(xù)執(zhí)行下一個路由守衛(wèi)。

• next(false): 表示取消當(dāng)前的路由跳轉(zhuǎn)。

• next('/path'): 表示跳轉(zhuǎn)到指定的路由路徑。

• next(error): 表示在路由跳轉(zhuǎn)過程中發(fā)生了錯誤，例如權(quán)限不足等。

需要注意的是，在使用路由守衛(wèi)時，我們需要顯式地調(diào)用next函數(shù)來控制路由的跳轉(zhuǎn)和功能，否則路由不會繼續(xù)向下執(zhí)行。在不同的守衛(wèi)中，next函數(shù)的行為和功能也會有所不同，需要根據(jù)具體的場景進(jìn)行調(diào)用。

Vue Router中的路由守衛(wèi)分為全局路由守衛(wèi)和路由獨享守衛(wèi)：

全局路由守衛(wèi)

全局路由守衛(wèi)是在整個應(yīng)用中都生效的守衛(wèi)，可以用于攔截所有的路由操作。在Vue Router@4中，全局守衛(wèi)有三個：beforeEach、beforeResolve和afterEach。

• beforeEach: 在路由跳轉(zhuǎn)之前執(zhí)行，可以用于進(jìn)行全局的訪問控制或重定向跳轉(zhuǎn)等操作。

• beforeResolve: 在路由跳轉(zhuǎn)完成前執(zhí)行，可以用于等待異步路由組件加載完成或在路由跳轉(zhuǎn)前進(jìn)行一些操作。

• afterEach: 在路由跳轉(zhuǎn)完成后執(zhí)行，可以用于對頁面進(jìn)行一些操作，例如監(jiān)測頁面埋點或修改頁面標(biāo)題等。

一個驗證用戶是否登錄的路由守衛(wèi)示例代碼如下

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

上面代碼中，如果用戶沒有登錄，則頁面跳轉(zhuǎn)到Login頁面，如果已經(jīng)登錄，則執(zhí)行next()跳轉(zhuǎn)

路由獨享守衛(wèi)

路由獨享守衛(wèi)僅對當(dāng)前路由生效，可以用于限制或增強(qiáng)某個路由的訪問權(quán)限。在Vue Router@4中，路由獨享守衛(wèi)有兩個：beforeEnter和leaveGuard。

• beforeEnter: 在進(jìn)入當(dāng)前路由之前執(zhí)行，可以用于增強(qiáng)當(dāng)前路由的訪問權(quán)限或進(jìn)行相關(guān)操作。

• leaveGuard: 在離開當(dāng)前路由之前執(zhí)行，可以用于給用戶提示或進(jìn)行相關(guān)操作。

使用路由守衛(wèi)時，我們可以在createRouter函數(shù)中進(jìn)行注冊，例如：

const routes=[
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 進(jìn)行路由訪問控制或相關(guān)操作
      }
    }
  ]

路由懶加載

路由懶加載是一種將路由組件按需異步加載的方式，只有當(dāng)路由對應(yīng)的組件需要使用時，才會動態(tài)地加載該組件對應(yīng)的代碼。使用路由懶加載可以優(yōu)化應(yīng)用程序的性能

在Vue Router中使用路由懶加載，我們可以通過使用import()和動態(tài)import()兩種方式來實現(xiàn)

使用import()方式實現(xiàn)懶加載

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
	{
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
 ]
const router = createRouter({
  history: createWebHistory(),
  routes
})

使用動態(tài)import()方式實現(xiàn)懶加載

const routes = [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

使用Vue Router的注意事項

• 動態(tài)參數(shù)不能有斜桿：當(dāng)使用動態(tài)參數(shù)時，請注意URL不能和動態(tài)參數(shù)相同。

• 導(dǎo)航流程:路由類似于棧，每次路由的跳轉(zhuǎn)都會被歷史紀(jì)錄中的歷史記錄所記錄。如果你跳轉(zhuǎn)到相同的路由，那么，歷史記錄中的最后幾次都會被忽略。默認(rèn)情況下，新跳轉(zhuǎn)的路由不會觸發(fā)路由更新流程，你需要顯式地使用router.push或者router.replace方法來更新到當(dāng)前路由。

• 導(dǎo)航被取消：如果你在beforeRouteLeave或beforeRouteUpdate守衛(wèi)中執(zhí)行了異步操作，則必須確保該異步操作已經(jīng)完成并調(diào)用了next(true)以確保導(dǎo)航可以進(jìn)行。

總結(jié) 

到此這篇關(guān)于Vue3中如何使用Vue Router的文章就介紹到這了,更多相關(guān)Vue3使用Vue Router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！