vue-router 的常見用法

1. 路由重定向

路由重定向指的是：用戶在訪問地址 A 的時候，強制用戶跳轉到地址 C ，從而展示特定的組件頁面。
通過路由規則的 redirect 屬性，指定一個新的路由地址，可以很方便地設置路由的重定向：

2. 嵌套路由

通過路由實現組件的嵌套展示，叫做嵌套路由。

2.1 聲明子路由鏈接和子路由占位符

在 About.vue 組件中，聲明 tab1 和 tab2 的子路由鏈接以及子路由占位符。示例代碼如下：

2.2 通過 children 屬性聲明子路由規則

在 src/router/index.js 路由模塊中，導入需要的組件，并使用 children 屬性聲明子路由規則：

書寫子路由的時候可以不用加“/”，這也是官網推薦的方式。

3. 動態路由匹配

思考：有如下 3 個路由鏈接：

3.1 動態路由的概念

動態路由指的是：把 Hash 地址中可變的部分定義為參數項，從而提高路由規則的復用性。 在 vue-router 中使用英文的冒號（:）來定義路由的參數項。示例代碼如下

3.2 $route.params 參數對象

在動態路由渲染出來的組件中，可以使用 this.$route.params 對象訪問到動態匹配的參數值。

3.3 使用 props 接收路由參數

為了簡化路由參數的獲取形式，vue-router 允許在路由規則中開啟 props 傳參。示例代碼如下：

4. 聲明式導航 & 編程式導航

在瀏覽器中，點擊鏈接實現導航的方式，叫做聲明式導航。例如：
? 普通網頁中點擊 a 鏈接、vue 項目中點擊 都屬于聲明式導在瀏覽器中，調用 API 方法實現導航的方式，叫做編程式導航。例如：

? 普通網頁中調用 location.href 跳轉到新頁面的方式，屬于編程式導航

4.1 vue-router 中的編程式導航 API

vue-router 提供了許多編程式導航的 API，其中最常用的導航 API 分別是：

① this.$router.push(‘hash 地址’)

? 跳轉到指定 hash 地址，并增加一條歷史記錄
② this.$router.replace(‘hash 地址’)

? 跳轉到指定的 hash 地址，并替換掉當前的歷史記錄
③ this.$router.go(數值 n)

? 實現導航歷史前進、后退

<template><div class="home-container"><h3>Home 組件</h3><hr /><button @click="gotoLk">通過 push 跳轉到“洛基”頁面</button><button @click="gotoLk2">通過 replace 跳轉到“洛基”頁面</button><router-link to="/main">訪問后臺主頁</router-link></div> </template><script> export default {name: 'Home',methods: {gotoLk() {// 通過編程式導航 API，導航跳轉到指定的頁面this.$router.push('/movie/1')},gotoLk2() {this.$router.replace('/movie/1')}} } </script><style lang="less" scoped> .home-container {min-height: 200px;background-color: pink;padding: 15px; } </style> <template><div class="movie-container"><!-- this.$route 是路由的“參數對象” --><!-- this.$router 是路由的“導航對象” --><h3>Movie 組件 --- {{ $route.params.mid }} --- {{ mid }}</h3><button @click="showThis">打印 this</button><button @click="goback">后退</button><!-- 在行內使用編程式導航跳轉的時候，this 必須要省略，否則會報錯！ --><button @click="$router.back()">back 后退</button><button @click="$router.forward()">forward 前進</button></div> </template><script> export default {name: 'Movie',// 接收 props 數據props: ['mid'],methods: {showThis() {console.log(this)},goback() {// go(-1) 表示后退一層// 如果后退的層數超過上限，則原地不動this.$router.go(-1)}} } </script><style lang="less" scoped> .movie-container {min-height: 200px;background-color: lightsalmon;padding: 15px; } </style>

4.2 $router.push

調用 this.$router.push() 方法，可以跳轉到指定的 hash 地址，從而展示對應的組件頁面。示例代碼如下：

4.3 $router.replace

調用 this.$router.replace() 方法，可以跳轉到指定的 hash 地址，從而展示對應的組件頁面。

push 和 replace 的區別：
? push 會增加一條歷史記錄
? replace 不會增加歷史記錄，而是替換掉當前的歷史記錄

4.4 $router.go

調用 this.$router.go() 方法，可以在瀏覽歷史中前進和后退。示例代碼如下：

4.5 $router.go 的簡化用法

在實際開發中，一般只會前進和后退一層頁面。因此 vue-router 提供了如下兩個便捷方法：
① $router.back()
? 在歷史記錄中，后退到上一個頁面
② $router.forward()
? 在歷史記錄中，前進到下一個頁面

5. 導航守衛

5.1 全局前置守衛

每次發生路由的導航跳轉時，都會觸發全局前置守衛。因此，在全局前置守衛中，程序員可以對每個路由進行
訪問權限的控制：

5.2 守衛方法的 3 個形參

全局前置守衛的回調函數中接收 3 個形參，格式為：

5.3 next 函數的 3 種調用方式

參考示意圖，分析 next 函數的 3 種調用方式最終導致的結果：

5.4 控制后臺主頁的訪問權限

總結

以上是生活随笔為你收集整理的vue-router 的常见用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。