https://router.vuejs.org/zh-cn/

https://www.cnblogs.com/lijuntao/p/7777581.html

https://blog.csdn.net/weixin_38704338/article/details/79103230

https://www.cnblogs.com/zhanyishu/p/6587571.html

https://react-guide.github.io/react-router-cn/index.html

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#響應路由引數的變化

動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個 User

 元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果：

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

const router = new VueRouter({
  routes: [
    // 動態路徑引數 以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

現在呢，像 /user/foo 和 /user/bar 都將對映到相同的路由。

一個“路徑引數”使用冒號 :

 標記。當匹配到一個路由時，引數值會被設定到 this.$route.params，可以在每個元件內使用。於是，我們可以更新 User 的模板，輸出當前使用者的 ID：

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

你可以看看這個線上例子。

你可以在一個路由中設定多段“路徑引數”，對應的值都會設定到 $route.params 中。例如：

模式	匹配路徑	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

除了 $route.params 外，$route 物件還提供了其它有用的資訊，例如，$route.query (如果 URL 中有查詢引數)、$route.hash 等等。你可以檢視 API 文件 的詳細說明。

#響應路由引數的變化

提醒一下，當使用路由引數時，例如從 /user/foo 導航到 /user/bar，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。

複用元件時，想對路由引數的變化作出響應的話，你可以簡單地 watch (監測變化) $route 物件：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

#高階匹配模式

vue-router 使用 path-to-regexp 作為路徑匹配引擎，所以支援很多高階的匹配模式，例如：可選的動態路徑引數、匹配零個或多個、一個或多個，甚至是自定義正則匹配。檢視它的 文件 學習高階的路徑匹配，還有 這個例子  展示 vue-router 怎麼使用這類匹配。

#匹配優先順序

有時候，同一個路徑可以匹配多個路由，此時，匹配的優先順序就按照路由的定義順序：誰先定義的，誰的優先順序就最高。

import Chart from './pages/chart'

export default new Router({

  routes: [
    { path: '/', name: '安裝', component: Install },
{ path: '/chart/:type', name: '測試圖表', component: Chart },

<ul>
  <li v-for="(item, index) in menu" :key="index">
    <router-link exact :to="item.url">{{ item.name }}</router-link>
  </li>
</ul>

const routerInfo = {
  '圖表': Object.keys(chartData).map(key => {
    return {
      name: chartData[key].name,
url: `/chart/${chartData[key].type}`
}
  }),

chart.vue:

export default {
  name: 'Item',
data () {
    return {
      chartData: [],
type: null,
innerType: null
}
  },
methods: {
    init () {
      this.type = this.$route.params.type
      this.chartData = CHART_DATA[this.type].data
this.innerType = CHART_DATA[this.type].type
}
  },
created () { this.init() },
watch: {
    $route () {
      this.init()
    }
  },
components: {
    VeBar,
VeLine,
VeHistogram,
VePie,
VeRing,

導航守衛

（譯者：『導航』表示路由正在發生改變。）

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全域性的, 單個路由獨享的, 或者元件級的。

記住引數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 物件來應對這些變化，或使用 beforeRouteUpdate 的元件內守衛。

完整的導航解析流程

1. 導航被觸發。
2. 在失活的元件裡呼叫離開守衛。
3. 呼叫全域性的 beforeEach 守衛。
4. 在重用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裡呼叫 beforeEnter。
6. 解析非同步路由元件。
7. 在被啟用的元件裡呼叫 beforeRouteEnter。
8. 呼叫全域性的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 呼叫全域性的 afterEach 鉤子。
11. 觸發 DOM 更新。
12. 用建立好的例項呼叫 beforeRouteEnter 守衛中傳給 next 的回撥函式。

13. 元件內的守衛

    最後，你可以在路由元件內直接定義以下路由導航守衛：

    • beforeRouteEnter
    • beforeRouteUpdate (2.2 新增)
    • beforeRouteLeave
    mainPage.vue 元件內的路由導航守衛：

mounted: function () {
  this.showdevIndxNav = true
  this.initWVBridge()
  document.getElementById('mainPage').addEventListener('touchstart', this.touchStart, false)
  document.getElementById('mainPage').addEventListener('touchend', this.touchEnd, false)
  window.addEventListener('resize', this.handleResize)
  window.addEventListener('offline', this.updateOnlineStatus)
  this.initNetwork()
},
beforeRouteEnter (to, from, next) {
  if (from.name === 'questionDetails') {
    to.meta.isBack = true
}
  next()
},

全域性守衛

你可以使用 router.beforeEach 註冊一個全域性前置守衛：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

全域性解析守衛

2.5.0 新增

在 2.5.0+ 你可以用 router.beforeResolve 註冊一個全域性守衛。這和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。

全域性後置鉤子

你也可以註冊全域性後置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函式也不會改變導航本身：

router.afterEach((to, from) => {
  // ...
})

路由獨享的守衛

你可以在路由配置上直接定義 beforeEnter 守衛：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

這些守衛與全域性前置守衛的方法引數是一樣的。

過渡動效

<router-view> 是基本的動態元件，所以我們可以用 <transition> 元件給它新增一些過渡效果：

<transition>
  <router-view></router-view>
</transition>

單個路由的過渡

上面的用法會給所有路由設定一樣的過渡效果，如果你想讓每個路由元件有各自的過渡效果，可以在各路由元件內使用 <transition> 並設定不同的 name。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

基於路由的動態過渡

還可以基於當前路由與目標路由的變化關係，動態設定過渡效果：

<!-- 使用動態的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接著在父元件內
// watch $route 決定使用哪種過渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

mode

• 型別: string

• 預設值: "hash" (瀏覽器環境) | "abstract" (Node.js 環境)

• 可選值: "hash" | "history" | "abstract"

  配置路由模式:

  • hash: 使用 URL hash 值來作路由。支援所有瀏覽器，包括不支援 HTML5 History Api 的瀏覽器。

  • history: 依賴 HTML5 History API 和伺服器配置。檢視 HTML5 History 模式。

  • abstract: 支援所有 JavaScript 執行環境，如 Node.js 伺服器端。如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

to

• 型別: string | Location

• required

表示目標路由的連結。當被點選後，內部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字串或者是描述目標位置的物件。

<!-- 字串 -->
<router-link to="home">Home</router-link>

replace

• 型別: boolean

• 預設值: false

設定 replace 屬性的話，當點選時，會呼叫 router.replace() 而不是 router.push()，於是導航後不會留下 history 記錄。

<router-link :to="{ path: '/abc'}" replace></router-link>

append

• 型別: boolean

• 預設值: false

設定 append 屬性後，則在當前（相對）路徑前新增基路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

• 型別: string

• 預設值: "a"

有時候想要 <router-link> 渲染成某種標籤，例如 <li>。 於是我們使用 tag prop 類指定何種標籤，同樣它還是會監聽點選，觸發導航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>

• active-class

  • 型別: string

  • 預設值: "router-link-active"

  設定 連結啟用時使用的 CSS 類名。預設值可以通過路由的構造選項 linkActiveClass 來全域性配置。

• exact

  • 型別: boolean

  • 預設值: 

    相關推薦

    vue router 路由學習筆記

    https://router.vuejs.org/zh-cn/https://www.cnblogs.com/lijuntao/p/7777581.htmlhttps://blog.csdn.net/weixin_38704338/article/details/791032

    Vue-Router基礎學習筆記

    1、安裝vue-router npm install vue-router yarn add vue-router 2、引入註冊vue-router import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

    Vue2.0筆記——vue-router路由

    Vue簡介 使用Vue.js開發SPA（Single Page Application）單頁面應用。vue-router可以通過html5的history API或者hash實現單頁應用，即不刷新跳轉，切換地址，只是頁面上的組件的切換；vue-router可以實現頁面間傳參等其他功能； 基本用法 當你要把 v

    vue-router 入門學習

    vue-router對於單頁面應用，尤其是移動端的網頁應用，使用<a></a>標簽實現頁面切換和跳轉會有300ms的延遲，遇到網速慢就會一直加載。所以在SPA應用中，用視圖切換來模擬頁面的切換vue-router 是Vue.js官方的路由插件，它和 Vue.js是深度集成的，適用於構建

    <keep-alive>控制Vue Router路由

    view homepage 信息 app keepal div path router class 只給部分組件加上<keep-alive>啊，在app.vue裏這樣 <!-- 這裏是需要keepalive的 --> <keep-alive&

    vue+node.js學習筆記

    拷貝 vue 靜態頁 -1 註冊 分享 head ade view 一、搭建vue開發環境 vue init webpack newmall cnpm install npm run dev 二、測試靜態頁 把靜態頁的css拷貝進來 src

    vue-router路由懶加載（解決vue項目首次加載慢）

    .com alt 什麽 配置 過多 異常 減少 webpack bpa 懶加載：----------------------------------------------------？ 　　　　也叫延遲加載，即在需要的時候進行加載，隨用隨載。 為什麽需要懶加載？ 　　　　

    「Vue」起步 - vue-router路由與頁面間導航

    port details cal 重定向 替換 特色 插件 實戰 顯式 vue-router 我們知道路由定義了一系列訪問的地址規則，路由引擎根據這些規則匹配找到對應的處理頁面，然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的，而前端路由是不存在"請求"一說的

    vue+node+mysql學習筆記

    cnpm 密碼加密 exist img 操作數 加密 tps bold 目錄 1.創建數據庫 create database vueBlog; use vueBlog; /*創建管理員表，用於後臺登錄，字段為管理員編號(自增長)、賬號、密碼、登錄時間*/ cre

    Vue（十六）vue-router路由

    gin package ebp () func font class 資源 red 一、 vue-router路由 1. 簡介 使用Vue.js開發SPA（Single Page Application）單頁面應用 根據不同url地址，顯示不同的內容，但顯示在同一

    移動端vue項目構建（二）配置環境 vue-router路由 VUX ui框架 axios請求等等~~

    公眾號 文件 ons keyword bubuko 使用方法 sass outer click 首先說一下，此項目的配置環境插件，因為是移動端所以有一部分考慮的都是移動端 ： 路由 vue-router 路由 路由是vue項目中很重要的東西，構建的時候一路回車就是選好了。

    靜態路由---學習筆記（原型）

    靜態路由一?路由原理 1.路由器工作原理：通過在PC上設置默認網關就可以是局域網的計算機和INTERNET進行通信。默認網關就是路由器以太口的IP地址。 2.路由表形成：路由表是路由器中為呼呼的路由條目的集合，路由器根據路由表做路徑選擇。①直連網段：當在路由器上配置了接口的IP地址，並且接口狀態為“up”

    vue-router路由懶加載

    簡單的 href mib blog 找到 打包 首頁 OS com 懶加載：----------------------------------------------------？ 　　　　也叫延遲加載，即在需要的時候進行加載，隨用隨載。 為什麽需要懶加載？ 　　　　像v

    Vue-router路由基礎總結（二）

    發現 路由配置 script -s r12 ali 添加 實例 code 一、命名路由 　　有時我們通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

    動態路由--學習筆記

    動態路由 學習筆記 51cto 一`?概念 指路由器能夠根據路由器之間的交換的特定路由信息自動地建立自己的路由表，並且能夠根據鏈路和節點的變化適時地進行自動調整。 二?動態路由原理動態路由機制的運作依賴路由器的兩個基本功能:路由器之間適時的路由信息交換，對路由表的維護: 路由器之間適時地交換路由

    vue簡單入門-學習筆記

    訪問 unit test sts 運行 9.png dom ould 完成後 是否 安裝 安裝node.js； 安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架：npm install -g vue-cli； 安裝完成後可以直接在cmd中輸入vue查看是否出現

    vue 關於vue.set的學習筆記

    this 官方 brush 發現 方法 vue ssi 使用 文檔 vue新手小白，在看vue文檔的時候 發現vue關於 數組，對象值改變的與 ng有那麽點不同。 官方表示 由於 JavaScript 的限制，Vue 不能檢測以下變動的數組： 當你利用索引直接設置一個項時

    Vue.js實戰 學習筆記 一（初識Vue.js）

    hid dom 介紹頁面 pan 分離 name 管理 end 筆記 官方文檔中介紹：漸進式技術棧（漸進式即可以階段性地使用Vue，或者可以在使用jQuery的同時，部分模塊上使用Vue，而不是像Angular一樣一用就是全部使用） 在設計上，使用MVVM（Model-V

    Vue.js實戰 學習筆記 四（v-bind及class與style綁定）

    自動 turn ont === 形式 new for function href DOM元素經常動態地綁定一些class或style（比如輪播時的active） Vue.js使用v-bind指令進行對class和style多種方法的綁定：通過表達式計算出字符串結果 如筆

    Vue.js框架學習筆記之三

    Vue.js中的表單 可以用v-model指令在表單 <input>及 <textarea>元素上建立雙向資料繫結,它會根據控制元件型別自動選取正確的方法來更新元素。 v-model 會忽略所有表單元素的 value、checked、select