1，什麼是vue路由？

Vue路由是指根據url分配到對應的處理程式；作用就是解析URL，呼叫對應的控制器（的方法，並傳遞引數）。Vue路由有助於在瀏覽器的URL或歷史記錄與Vue元件之間建立連結，從而允許某些路徑渲染與之關聯的任何一個檢視。

2，原生js實現vue路由

a標籤中加入#/路徑，配合window.onhashchange事件。雜湊值訪問時，會把hash值拼接到url路徑後，並觸發hashchange事件。

3，vue 路由實現的步驟：

（1），在引入vue之後引入vue路由外掛

（2），在根元件模板中寫入導航條，使用router-link標籤（固定路由）

（3），建立全域性元件，有多少路由建立多少元件。

（4），建立vuerouter物件，裡面有routes欄位是個陣列，裡面有物件，物件中包含path，component欄位值是全域性元件的返回值，ye可以有name欄位。

（5），在跟元件中 寫入router欄位，它的值是vuerouter物件的返回值

（6），在跟元件模板中新增router-view欄位，路由出口。

4，vue路由跳轉的兩種方式

（1），使用標籤router-link 標籤跳轉。

（2），使用程式設計式導航跳轉，原理是 點選button按鈕，觸發函式，執行router.push('/path')   引數可以是路徑 也可以是傳遞的引數.

5，路由的重定向

在預設直接開啟的情況下，hash值預設指向/，如果想讓它開啟時，預設指向某個路徑，可以用重定向  在routes中新增一個物件

{path：‘/’，redirect=‘/main’}

6，路由監聽

在根元件中可以對路由進行監聽，使用 watch屬性  監聽$route 欄位（這是路由的配置資訊，自動生成的），引數有兩個值newvalue，oldvalue，分別是跳轉後的路由物件和跳轉前的路由物件，物件中有path，代表路徑，可以判斷從哪一個路由到哪一個路由。

注意  $route ，router區別：

router是我們自己寫的路由物件，裡面包括path和component欄位。 等同於this.$router 

$route是自動生成的，裡面是每一個路由物件的具體資訊。

7，  keep-alive  在路由跳轉時，元件會建立銷燬，如果不想元件建立和銷燬，可以用keep-alive保留狀態，元件中的資料會保留，做法是在router-view外寫keep-alive標籤。

　　transition是動畫效果，有出場和入場動畫，可以通過name屬性來達到控制頁面切換之間的動畫。

8，vue路由傳值

方式一：url拼接傳值，

步驟：（1）在元件的data物件中新增 msg欄位

（2）在動態路由的router-link標籤的:to屬性上拼接  ：to=" ‘/main?name=’+msg ”

（3）在需要的模板標籤中使用 $route.query.name 接收。

方式二：友好url傳值

步驟：（1）在路由配置物件中新增動態路由配置。{path:'/main/:name',component:Maincom}  動態路徑

（2）在動態路由的router-link標籤的:to屬性上拼接  ：to=" ‘/main/‘+msg”

（3）在路由跳轉後的元件模板上接受使用 $route.params.name

方式三：query物件傳值

步驟：（1）動態路由to屬性繫結一個obj物件，

（2）在data中定義一個obj物件包括obj:{path:'/main',query:{ name：’lisi‘ }}

  (3)   在路由跳轉後的元件模板內，使用$route.query.name 接收

方式四：命名路由（params物件）傳值

步驟：（1）在需要向外傳遞的路由配置物件中加入name欄位 name='guoge'

  (2)   動態路由to屬性繫結一個obj物件 data中定義的物件中有name欄位和params欄位物件，物件中是傳遞的資訊。

傳遞動態值

computed: {
                obj() {
                    return {
                        path: "/main",
                        query: { name: this.msg }
                    }
                }
            }

（3）在路由跳轉後的元件模板中使用$route.params.name 接收 如果在元件中使用 可以用 this.$route.params.name。

 四種路由傳值方式的主要區別:
        前三種(url拼接,動態url,query物件)傳值方式都會把資料拼接到url路徑上, 重新整理頁面資料不會丟失, 但由於url長度有限制, 資料量不能太大
        第四種(命名路由傳值)傳值方式不會把資料拼接到url路徑上, 重新整理頁面資料會丟失, 但傳遞的資料量大小無限制

9，程式設計式跳轉傳值

一般式button按鈕 觸發函式，函式中寫入 router.push( '跳轉的路徑？name='+zhangsan)   url 傳值

router.push( '跳轉的路徑/'+this.msg)     動態url 傳值

router.push({path:'/main',query:{name:'zhangsan'}})   query物件傳值

router.push({name:'/main',params:{name:'zhangsan'}})   params物件傳值

router.back()  返回上一個路由

router.go(1) 去下一個路由