路由跳轉方式

路由的跳轉方式有兩種形式。

一、宣告式導航

router-link標籤 ,可以把router-link理解為一個a標籤，它 也可以加class修飾

• 屬性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class
• to（必選引數）：型別string/location。

<!-- 字串 -->
<router-link to="/home">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 帶查詢引數，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
 

• replace：型別boolean，預設值 false。會呼叫 router.replace() ，而不是 router.push()，於是導航後不會留下 history 記錄 。
• append：型別boolean，預設值 false。 設定 append 屬性後，則在當前（相對）路徑前新增基路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b。
• tag：型別string，預設值 “a” 。想要 <router-link> 渲染成某種標籤。
• active-class：型別string，預設值 “router-link-active” 。選中樣式，可以配置檔案中統一修改 “linkActiveClass:'active'”。

<router-link to="/home"  replace tag="button" active-class="active">首頁</router-link> 
<style>
  .active{
    color: green;
  }
</style>

• exact：型別: boolean，預設值: false。“是否啟用” 預設類名的依據是全包含匹配。

• exact-active-class：型別string，預設值 “exact-active-class” 。當連結被精確匹配時候的選中樣式，可以配置檔案中統一修改 “linkExactActiveClass:'exact-active”。

<router-link to="/home" active-class="active" exact>首頁</router-link>
<!--
    1、/home
    2、/home/new
      '/home'的exact為false時,當前路徑是 '/home/new', '/home'也是啟用樣式
      '/home'的exact為true時,當前路徑是 '/home/new','/home'是啟用樣式
-->

<!-- 應用場景：導航切換問題, 切換到別的子路由的時候,父路由啟用樣式都一直存在的問題 -->


<!--等價於-->
<router-link to="/home" exact-active-class="exact-active">首頁</router-link>

二、程式設計式導航

程式設計式導航 push|replace：宣告式導航能做的程式設計式都能做，程式設計式導航除了進行路由跳轉，而且還可以處理一些業務

• push()：跳轉會向 history 棧新增一個新的記錄，當我們點選瀏覽器的返回按鈕時可以看到之前的頁面。

// 字串
this.$router.push('home')
// 物件
this.$router.push({ path: 'home' })
// 命名的路由  變成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢引數，變成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})

• go()：頁面路由跳轉 前進或者後退

this.$router.go(-1) // 後退

• replace()：替換當前的頁面，不會向 history 棧新增一個新的記錄。一般使用replace來做404頁面。

this.$router.replace(’/’)
//配置路由時path有時候會加 ‘/’ 有時候不加,以’/'開頭的會被當作根路徑，就不會一直巢狀之前的路徑。

作者：黃哈哈。

原文連結：https://www.cnblogs.com/jiajia-hjj/p/15854492.html

本部落格大多為學習筆記或讀書筆記，本文如對您有幫助，還請多推薦下此文，如有錯誤歡迎指正。