Vue3學習筆記（五）——路由，Router

一、前端路由的概念與原理

1.1. 什麼是路由

路由（英文：router）就是對應關係。

1.2. SPA 與前端路由

SPA 指的是一個 web 網站只有唯一的一個 HTML 頁面，所有組件的展示與切換都在這唯一的一個頁面內完成。

此時，不同組件之間的切換需要通過前端路由來實現。

結論：在 SPA 項目中，不同功能之間的切換，要依賴於前端路由來完成！

1.3. 什麼是前端路由

通俗易懂的概念：Hash 地址與組件之間的對應關係。

1.4. 前端路由的工作方式

① 用戶點擊了頁面上的路由鏈接
② 導致了 URL 地址欄中的 Hash 值發生了變化
③ 前端路由監聽了到 Hash 地址的變化
④ 前端路由把當前 Hash 地址對應的組件渲染都瀏覽器中

結論：前端路由，指的是 Hash 地址與組件之間的對應關係！

1.5. 實現簡易的前端路由

步驟1：通過 <component> 標籤，結合 comName 動態渲染組件。示例代碼如下：

<template>
  <div class="main">
    <nav>
      <a href="#/Home">首頁</a> | <a href="#/Movie">電影</a> |
      <a href="#/About">關於</a>
    </nav>
    <section>
      <KeepAlive>
        <component :is="coms[comName]"></component>
      </KeepAlive>
    </section>
  </div>
</template>

<script lang="ts" setup>
import Home from "./views/Home.vue";
import Movie from "./views/Movie.vue";
import About from "./views/About.vue";
import { ref, KeepAlive, onMounted } from "vue";

let coms = {
  Home,
  Movie,
  About,
};

let comName = ref("Home");
//當頁面掛載成功時的鉤子
onMounted(() => {
  //當hash值變化時的事件
  window.addEventListener(
    "hashchange",
    (event) => {
      //#/Home,獲取路徑名稱
      let comKey = location.hash.substring(2);
      //更換當前組件名稱
      comName.value = comKey;
    },
    false
  );
});
</script>

<style>
.main a {
  color: #00f;
  text-decoration: none;
  font-size: 16px;
}
.main a:hover {
  color: orangered;
}
.main nav {
  border-bottom: 2px solid #999;
  height: 46px;
  line-height: 46px;
}
</style>

步驟2：在 App.vue 組件中，爲 <a> 鏈接添加對應的 hash 值：

    <nav>
      <a href="#/Home">首頁</a> | 
      <a href="#/Movie">電影</a> |
      <a href="#/About">關於</a>
    </nav>

步驟3：在 created 生命週期函數中，監聽瀏覽器地址欄中hash 地址的變化，動態切換要展示的組件的名稱：

//當頁面掛載成功時的鉤子
onMounted(() => {
  //當hash值變化時的事件
  window.addEventListener(
    "hashchange",
    (event) => {
      //#/Home,獲取路徑名稱
      let comKey = location.hash.substring(2);
      //更換當前組件名稱
      comName.value = comKey;
    },
    false
  );
});

二、vue-router 的基本用法

2.1. 什麼是 vue-router

vue-router 是 vue.js 官方給出的路由解決方案。它只能結合 vue 項目進行使用，能夠輕鬆的管理 SPA 項目中組件的切換。

vue-router 的官方文檔地址：https://router.vuejs.org/zh/

Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：

• 嵌套路由映射
• 動態路由選擇
• 模塊化、基於組件的路由配置
• 路由參數、查詢、通配符
• 展示由 Vue.js 的過渡系統提供的過渡效果
• 細緻的導航控制
• 自動激活 CSS 類的鏈接
• HTML5 history 模式或 hash 模式
• 可定製的滾動行爲
• URL 的正確編碼

2.2. vue-router 安裝和配置的步驟

① 安裝 vue-router 包
② 創建路由模塊與路由規則
③ 導入並掛載路由模塊
④ 聲明路由鏈接和佔位符

2.2.1 在項目中安裝 vue-router

在 vue3 的項目中，安裝 vue-router 的命令如下：

2.2.2 創建路由模塊與路由規則

在 src 源代碼目錄下，新建router/index.ts路由模塊，並初始化如下的代碼：

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import Movie from '../views/Movie.vue';
import About from '../views/About.vue';

//路由記錄集合
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/home",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About
    },
];

//創建路由器
let router=createRouter({
    history:createWebHashHistory(),  //指定路由模式爲hash模式（兼容性好，但帶#）
    routes
});

//導出
export default router;

2.2.3 導入並掛載路由模塊

在 src/main.ts 入口文件中，導入並掛載路由模塊。示例代碼如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'  //導入路由規則

let app=createApp(App);

//掛載路由中間件
app.use(router);

app.mount('#app')

2.2.4 聲明路由鏈接和佔位符

router-link

請注意，我們沒有使用常規的 a 標籤，而是使用一個自定義組件 router-link 來創建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。我們將在後面看到如何從這些功能中獲益。

router-view

router-view 將顯示與 url 對應的組件。你可以把它放在任何地方，以適應你的佈局。

在 src/App.vue 組件中，使用 vue-router 提供的 <router-link> 和 <router-view> 聲明路由鏈接和佔位符：

<template>
  <div class="main">
    <nav>
      <router-link to="/home">首頁</router-link> |
      <router-link to="/movie">電影</router-link> |
      <router-link to="/about">關於</router-link>
    </nav>
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>

<script lang="ts" setup></script>

<style>
.main a {
  color: #00f;
  text-decoration: none;
  font-size: 16px;
}
.main a:hover {
  color: orangered;
}
.main nav {
  border-bottom: 2px solid #999;
  height: 46px;
  line-height: 46px;
}
section {
  min-height: 500px;
  margin: 0;
}
</style>

src/views/Home.vue

<template>
  <div class="cls1">
    <h2>這是首頁 - Home</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #def;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

src/views/Movie.vue

<template>
  <div class="cls1">
    <h2>這是電影頻道 - Movie</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #dfe;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

src/views/About.vue

<template>
  <div class="cls1">
    <h2>這是關於我們 - About</h2>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.cls1 {
  background: #fde;
  min-height: 500px;
}
.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>

運行效果：

三、vue-router 的常見用法

3.1. 路由重定向

路由重定向指的是：用戶在訪問地址 A 的時候，強制用戶跳轉到地址 C ，從而展示特定的組件頁面。

通過路由規則的 redirect 屬性，指定一個新的路由地址，可以很方便地設置路由的重定向：

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

//路由記錄
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About
    },
    {
        path:"/film",
        redirect:"/movie"
    }
];

//創建路由對象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

3.2. 嵌套路由

通過路由實現組件的嵌套展示，叫做嵌套路由。嵌套路由也稱之爲子路由，就是在被切換的組件中又切換其他子組件

例如：在one界面中又有兩個按鈕，通過這兩個按鈕進一步切換one中的內容一般都是這種，子路由定義到一級路由裏面

點擊父級路由鏈接顯示模板內容　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　① 模板內容中又有子級路由鏈接

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　② 點擊子級路由鏈接顯示子級模板內容

3.1 聲明子路由鏈接和子路由佔位符

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

<template lang="">
  <div class="about">
    <h2>這是About組件 - 關於</h2>
    <router-link to="/about/tab1">企業文化</router-link> |
    <router-link to="/about/tab2">企業介紹</router-link>
    <hr />
    <div class="viewBox">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.about {
  border: 1px solid #ccc;
  background: #def;
  padding: 10px;
  margin: 10px;
}
.viewBox {
  min-height: 200px;
  background: #dfe;
}
</style>

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

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

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

//路由記錄
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    }
];

//創建路由對象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

3.3. 帶參數的動態路由匹配

3.3.1、獲取路徑參數param、query與hash

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

定義如下 3 個路由規則，是否可行?

缺點：路由規則的複用性差。

很多時候，我們需要將給定匹配模式的路由映射到同一個組件。例如，我們可能有一個 User 組件，它應該對所有用戶進行渲染，但用戶 ID 不同。在 Vue Router 中，我們可以在路徑中使用一個動態字段來實現，我們稱之爲 路徑參數 ：

const User = {
  template: '<div>User</div>',
}

// 這些都會傳遞給 `createRouter`
const routes = [
  // 動態字段以冒號開始
  { path: '/users/:id', component: User },
]

現在像 /users/johnny 和 /users/jolyne 這樣的 URL 都會映射到同一個路由。

路徑參數 用冒號 : 表示。當一個路由被匹配時，它的 params 的值將在每個組件中以 this.$route.params 的形式暴露出來。因此，我們可以通過更新 User 的模板來呈現當前的用戶 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

你可以在同一個路由中設置有多個 路徑參數，它們會映射到 $route.params 上的相應字段。例如：

匹配模式	匹配路徑	$route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

除了 $route.params 之外，$route 對象還公開了其他有用的信息，如 $route.query（如果 URL 中存在參數）、$route.hash 等。你可以在 API 參考中查看完整的細節。

這個例子的 demo 可以在這裏找到。

<template lang="">
  <div>
    <h2>這是Movie組件 - 電影</h2>
    <h3>當前id={{ $route.params.id }}</h3>
    <h3>當前query={{ $route.query }}</h3>
    <h3>當前hash={{ $route.hash }}</h3>
  </div>
</template>

3.3.2、使用 props 接收路由參數

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

    {
        name:"movie",
        path:"/movie/:id?",
        component:Movie,
        props:true
    },

Movie.vue

<template lang="">
  <div>
    <h2>這是Movie組件 - 電影</h2>
    <h3>當前id={{ $route.params.id }}</h3>
    <h3>當前query={{ $route.query }}</h3>
    <h3>當前hash={{ $route.hash }}</h3>
    <h3>當前id={{ id }} (props直接接收)</h3>
  </div>
</template>
<script>
export default {
  setup() {
    console.log("組件被創建");
  },
  created() {
    this.$watch(
      () => this.$route.params.id,
      (toParam, previousParam) => {
        console.log(toParam, previousParam);
      }
    );
  },
  props: ["id"],
};
</script>
<style lang=""></style>

 

3.3.3、響應路由參數的變化

使用帶有參數的路由時需要注意的是，當用戶從 /users/johnny 導航到 /users/jolyne 時，相同的組件實例將被重複使用。因爲兩個路由都渲染同個組件，比起銷燬再創建，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會被調用。

要對同一個組件中參數的變化做出響應的話，你可以簡單地 watch $route 對象上的任意屬性，在這個場景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 對路由變化做出響應...
      }
    )
  },
}

或者，使用 beforeRouteUpdate 導航守衛，它也可以取消導航：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 對路由變化做出響應...
    this.userData = await fetchUser(to.params.id)
  },
}

<template lang="">
  <div>
    <h2>這是Movie組件 - 電影</h2>
    <h3>當前id={{ $route.params.id }}</h3>
    <h3>當前query={{ $route.query }}</h3>
    <h3>當前hash={{ $route.hash }}</h3>
  </div>
</template>
<script>
export default {
  setup() {
    console.log("組件被創建");
  },
  created() {
    this.$watch(
      () => this.$route.params.id,
      (toParam, previousParam) => {
        console.log(toParam, previousParam);
      }
    );
  },
};
</script>
<style lang=""></style>

3.3.4、捕獲所有路由或 404 Not found 路由

常規參數只匹配 url 片段之間的字符，用 / 分隔。如果我們想匹配任意路徑，我們可以使用自定義的 路徑參數 正則表達式，在 路徑參數 後面的括號中加入 正則表達式 :

const routes = [
  // 將匹配所有內容並將其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 將匹配以 `/user-` 開頭的所有內容，並將其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

在這個特定的場景中，我們在括號之間使用了自定義正則表達式，並將pathMatch 參數標記爲可選可重複。這樣做是爲了讓我們在需要的時候，可以通過將 path 拆分成一個數組，直接導航到路由：

this.$router.push({
  name: 'NotFound',
  // 保留當前路徑並刪除第一個字符，以避免目標 URL 以 `//` 開頭。
  params: { pathMatch: this.$route.path.substring(1).split('/') },
  // 保留現有的查詢和 hash 值，如果有的話
  query: this.$route.query,
  hash: this.$route.hash,
})
router/index.ts

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

const NotFound={
    template:'<div>沒有找到你要訪問的頁面 404，目標位置：{{$route.params.path}}</div>'
}

//路由記錄
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/movie/:id?",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    },
    {
        path:"/:path(.*)*",
        component:NotFound
    }
];

//創建路由對象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

直接定義組件默認是不允許的

 

 

 開啓運行時編譯

配置vue.config.js文件，加上下面這一段：

module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,  // 加上這一段
  // lintOnSave: false,
})

記得保存並重新運行項目

3.4、路由的匹配語法

3.4.1、在參數中自定義正則

當定義像 :userId 這樣的參數時，我們內部使用以下的正則 ([^/]+) (至少有一個字符不是斜槓 / )來從 URL 中提取參數。這很好用，除非你需要根據參數的內容來區分兩個路由。想象一下，兩個路由 /:orderId 和 /:productName，兩者會匹配完全相同的 URL，所以我們需要一種方法來區分它們。最簡單的方法就是在路徑中添加一個靜態部分來區分它們：

const routes = [
  // 匹配 /o/3549
  { path: '/o/:orderId' },
  // 匹配 /p/books
  { path: '/p/:productName' },
]

但在某些情況下，我們並不想添加靜態的 /o /p 部分。由於，orderId 總是一個數字，而 productName 可以是任何東西，所以我們可以在括號中爲參數指定一個自定義的正則：

const routes = [
  // /:orderId -> 僅匹配數字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何內容
  { path: '/:productName' },
]

現在，轉到 /25 將匹配 /:orderId，其他情況將會匹配 /:productName。routes 數組的順序並不重要!

TIP

確保轉義反斜槓( \ )，就像我們對 \d (變成\\d)所做的那樣，在 JavaScript 中實際傳遞字符串中的反斜槓字符。

    {
        path:"/:id(\\d{3})?",
        component:Movie
    },

3.4.2、可選參數

你也可以通過使用 ? 修飾符(0 個或 1 個)將一個參數標記爲可選：

const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },
  // 匹配 /users 和 /users/42
  { path: '/users/:userId(\\d+)?' },
]

請注意，* 在技術上也標誌着一個參數是可選的，但 ? 參數不能重複。

3.5、聲明式導航 & 編程式導航

除了使用 <router-link> 創建 a 標籤來定義導航鏈接，我們還可以藉助 router 的實例方法，通過編寫代碼來實現。

3.5.1、導航到不同的位置

注意：在 Vue 實例中，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。

想要導航到不同的 URL，可以使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器後退按鈕時，會回到之前的 URL。

當你點擊 <router-link> 時，內部會調用這個方法，所以點擊 <router-link :to="..."> 相當於調用 router.push(...) ：

聲明式	編程式
<router-link :to="...">	router.push(...)

該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。例如：

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

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

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

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

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

注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數的 path ：

const username = 'eduardo'
// 我們可以手動建立 url，但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo
// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的話，使用 `name` 和 `params` 從自動 URL 編碼中獲益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

當指定 params 時，可提供 string 或 number 參數（或者對於可重複的參數可提供一個數組）。任何其他類型（如 undefined、false 等）都將被自動字符串化。對於可選參數，你可以提供一個空字符串（""）來跳過它。

由於屬性 to 與 router.push 接受的對象種類相同，所以兩者的規則完全相同。

router.push 和所有其他導航方法都會返回一個 Promise，讓我們可以等到導航完成後才知道是成功還是失敗。我們將在 Navigation Handling 中詳細介紹。

App.vue

<template>
  <div class="main">
    <router-link to="/">首頁</router-link> |
    <router-link to="/movie">電影</router-link> |
    <router-link to="/about">關於</router-link> |
    <router-link to="/film">影視</router-link>
    <router-view></router-view>
  </div>

  <button @click="navClick">編程式導航</button>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

function navClick() {
  // 字符串路徑
  //router.push("/movie/100");

  // 帶有路徑的對象
  //router.push({ path: "/movie/200" });

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

  // 帶查詢參數，結果是 /movie?plan=private
  //router.push({ path: "/movie", query: { plan: "private" } });

  // 帶 hash，結果是 /about#team
  router.push({ path: "/about", hash: "#team" });
}
</script>

<style scoped>
.main {
  width: 400px;
  border: 2px solid #999;
  border-radius: 10px;
  padding: 20px;
}
</style>

router/index.ts

import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'

import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Movie from '../views/Movie.vue';

import Tab1 from '../views/Tab1.vue';
import Tab2 from '../views/Tab2.vue';

const NotFound={
    template:'<div>沒有找到你要訪問的頁面 404，目標位置：{{$route.params.path}}</div>'
}

//路由記錄
let routes:RouteRecordRaw[]=[
    {
        path:"/",
        component:Home
    },
    {
        path:"/:id(\\d{3})?",
        component:Movie
    },
    {
        name:"movie",
        path:"/movie/:id?",
        component:Movie
    },
    {
        path:"/about",
        component:About,
        redirect:"/about/tab1",
        children:[{path:"tab1",component:Tab1},{path:"tab2",component:Tab2}]
    },
    {
        path:"/film",
        redirect:"/movie"
    },
    {
        path:"/:path(.*)*",
        component:NotFound
    }
];

//創建路由對象
let router=createRouter({
    history: createWebHashHistory(),  //指定路由模式
    routes
})

export default router;

目標路由組件 target.vue：

<script setup lang="ts"> //setup寫在script標籤裏，是setup(){}的語法糖
import {useRoute} from 'vue-router'
const route = useRoute()
console.log("name:"+route.query.name)//接收參數
</script>

3.5.2、替換當前位置

它的作用類似於 router.push，唯一不同的是，它在導航時不會向 history 添加新記錄，正如它的名字所暗示的那樣——它取代了當前的條目。

聲明式	編程式
<router-link :to="..." replace>	router.replace(...)

也可以直接在傳遞給 router.push 的 routeLocation 中增加一個屬性 replace: true ：

router.push({ path: '/home', replace: true })
// 相當於
router.replace({ path: '/home' })

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

3.5.3、橫跨歷史

該方法採用一個整數作爲參數，表示在歷史堆棧中前進或後退多少步，類似於 window.history.go(n)。

例子

// 向前移動一條記錄，與 router.forward() 相同
router.go(1)

// 返回一條記錄，與 router.back() 相同
router.go(-1)

// 前進 3 條記錄
router.go(3)

// 如果沒有那麼多記錄，靜默失敗
router.go(-100)
router.go(100)

 $router.go 的簡化用法
在實際開發中，一般只會前進和後退一層頁面。因此 vue-router 提供瞭如下兩個便捷方法：
① $router.back()
⚫ 在歷史記錄中，後退到上一個頁面

② $router.forward()
⚫ 在歷史記錄中，前進到下一個頁面

3.6. 導航守衛

導航守衛可以控制路由的訪問權限。示意圖如下：

 

 

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

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

6.3 next 函數的 3 種調用方式
參考示意圖，分析 next 函數的 3 種調用方式最終導致的結果：
當前用戶擁有後臺主頁的訪問權限，直接放行：next()
當前用戶沒有後臺主頁的訪問權限，強制其跳轉到登錄頁面：next(‘/login’)
當前用戶沒有後臺主頁的訪問權限，不允許跳轉到後臺主頁：next(false)

6.4 控制後臺主頁的訪問權限

總結
① 能夠知道如何在 vue 中配置路由
⚫ createRouter、app.use(router)

② 能夠知道如何使用嵌套路由
⚫ 通過 children 屬性進行路由嵌套

③ 能夠知道如何實現動態路由匹配
⚫ 使用冒號聲明參數項、this.$route.params、props: true

④ 能夠知道如何使用編程式導航
⚫ this.$router.push、this.$router.go

⑤ 能夠知道如何使用導航守衛
⚫ 路由實例.beforeEach((to, from, next) => { /* 必須調 next 函數 */ })
————————————————
版權聲明：本文爲CSDN博主「薄荷糖C」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/HXBest/article/details/122657154