1.URL的hash和H5的history模式

URL的hash的理解：原來：localhost:8080/# 在console輸入：location.hash='aijiang' 現在：localhost:8080/#/aijiang

H5的history模式：pushState(類似於入棧) / replaceState (替換頁面，而不是將介面壓入棧) / back(類似於出棧) / go

2.使用vue-router的步驟

建立router例項

掛載到vue例項中

建立路由元件

配置元件和路徑對映關係

使用路由（html方式）

還有另一種路由使用方式(JS程式碼方式)。有時候, 頁面的跳轉可能需要執行對應的JavaScript程式碼

注意：

• 定義導航元件。使用vue-router元件庫暴露出來的<router-link>元件來定義導航標籤，其中通過to屬性來指定跳轉的連結。router-link最終會被編譯成<a>標籤。

• 定義渲染位置。使用vue-router元件暴露出來的<router-view>元件來控制渲染位置。當瀏覽器的路勁和我們的路由列表中的一個匹配的時候，就會把對應的元件渲染在router-view的位置。

3.路由的預設路徑和H5的history模式

4.動態路由

在某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入使用者介面時，希望是如下的路徑：

 /user/aaaa或/user/bbbb
 除了有前面的/user之外，後面還跟上了使用者的ID
 這種path和Component的匹配關係，我們稱之為動態路由(也是路由傳遞資料的一種方式)

5.路由的懶載入

路由懶載入的主要作用就是將路由對應的元件打包成一個個的js程式碼塊.
只有在這個路由被訪問到的時候, 才載入對應的元件

const Home = () => import('views/home/Home')
const Category = () => import('views/category/Category')
const Cart = () => import('views/cart/Cart')
const Profile 
 
= () => import('views/profile/Profile')
const Detail = () => import('views/detail/Detail')

6.巢狀路由

巢狀路由是一個很常見的功能

 比如在home頁面中, 我們希望通過/home/news和/home/message訪問一些內容.
 一個路徑對映一個元件, 訪問這兩個路徑也會分別渲染兩個元件

實現巢狀路由有兩個步驟:
 建立對應的子元件, 並且在路由對映中配置對應的子路由.
 在元件內部使用<router-view>標籤

7.傳遞路由引數的方式

傳遞引數主要有兩種型別: params和query

 params的型別:
配置路由格式: /router/:id
傳遞的方式: 在path後面跟上對應的值
傳遞後形成的路徑: /router/123, /router/abc
 query的型別:
配置路由格式: /router, 也就是普通配置
傳遞的方式: 物件中使用query的key作為傳遞方式
傳遞後形成的路徑: /router?id=123, /router?id=abc

query 方式傳參和接收引數

傳參：

this.$router.push({
       path:'/openAccount',
       query:{id:id}
     });

接收引數：

this.$route.query.id

params方式傳參和接收引數

傳參：

  this.$router.push({
       name:'openAccount',
       params:{
         id: id
       }
     })

接收引數：

 this.$route.params.id

注意：

1.params傳參，push裡面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由，如果這裡寫成了path，接收引數頁面會是undefined！！！

2.二者還有點區別，可以理解為：query相當於get請求，頁面跳轉的時候，可以在位址列看到請求引數，而params相當於post請求，引數不會再位址列中顯示

3.傳參是this.$router,接收引數是this.$route。兩者區別：

$router為VueRouter例項，想要導航到不同URL，則使用$router.push方法

$route為當前router跳轉物件，裡面可以獲取name、path、query、params等

router.js

export default new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/register',
   name: 'register',
   component: Register
  }
})

元件(傳參)

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 這裡的name值是在定義route.js時中的name
   //this.$router.push({ path: '/register', query: { userId: 123 }});//query方式 
  }
 }
}
</script>
<style>
</style>

元件(接參)

<template>
 <div>
  {{this.$route.params.userId}}或者{{this.$route.query.userId}}
 </div>
</template>
<script>
</script>

8.導航守衛（擱置,等專案遇到了在回頭看）

vue-router提供導航守衛主要用來監聽路由的進入和離開
vue-router提供了beforeEach和afterEach的鉤子函式, 它們會在路由即將改變前和改變後觸發.

9.keep-alive

可以在元件切換時，儲存其包裹的元件的狀態，使其不被銷燬，防止多次渲染。其擁有兩個獨立的生命週期鉤子函式 actived 和 deactived，使用keep-alive包裹的元件在切換時不會被銷燬，而是快取到記憶體中並執行 deactived 鉤子函式，命中快取渲染後會執行 actived 鉤子函式。

它們有兩個非常重要的屬性:
 include - 字串或正則表達，只有匹配的元件會被快取
 exclude - 字串或正則表示式，任何匹配的元件都不會被快取
 router-view 也是一個元件，如果直接被包在 keep-alive 裡面，所有路徑匹配到的檢視元件都會被快取：

<template>
  <div id="app" class="wrapper">
<!-- 希望點一個新的圖片，會有新的商品內容，重新執行Detail的created,獲取新的iid-->
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
    <main-tab-bar/>
  </div>
</template>