這是之前寫的，先在回來看也一臉懵逼，直接在我的文章params和query傳參的使用和區別($router和$route的區別)再簡單清晰的總結了一下。
1、$route對象
$route對象表示當前的路由信息，包含了當前 URL 解析得到的信息。包含當前的路徑，參數，query對象等。
**1.$route.path**
字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。
**2.$route.params**
一個 key/value 對象，包含了 動態片段 和 全匹配片段，
如果沒有路由參數，就是一個空對象。
**3.$route.query**
一個 key/value 對象，表示 URL 查詢參數。
例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，
如果沒有查詢參數，則是個空對象。
**4.$route.hash**
當前路由的 hash 值 (不帶 #) ，如果沒有 hash 值，則為空字符串。錨點
**5.$route.fullPath**
完成解析后的 URL，包含查詢參數和 hash 的完整路徑。
**6.$route.matched**
數組，包含當前匹配的路徑中所包含的所有片段所對應的配置參數對象。
**7.$route.name 當前路徑名字**
**8.$route.meta 路由元信息
route object 出現在多個地方:
•組件內的 this.route和 route和route watcher 回調（監測變化處理）;
•router.match(location) 的返回值
•scrollBehavior 方法的參數
•導航鈎子的參數：
|
1
2
3
|
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息對象,后面使用路由的鈎子函數就容易理解了
})
|
2、$router對象
$router對象是全局路由的實例，是router構造方法的實例。
路由實例方法：
1、push
|
1
2
3
4
5
6
7
8
|
// 字符串
this
.$router.push(
'home'
)
// 對象
this
.$router.push({ path:
'home'
})
// 命名的路由
this
.$router.push({ name:
'user'
, params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=123
this
.$router.push({ path:
'register'
, query: { plan:
'123'
}})
|
push方法其實和<router-link :to="...">是等同的。
注意：push方法的跳轉會向 history 棧添加一個新的記錄，當我們點擊瀏覽器的返回按鈕時可以看到之前的頁面。
2、go
|
1
2
|
// 頁面路由跳轉 前進或者后退
this
.$router.go(-1)
// 后退
|
3、replace
|
1
2
|
//push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面，
不會向 history 棧添加一個新的記錄
|
05
|
1
2
|
// 一般使用replace來做404頁面
this
.$router.replace(
'/'
)
|
配置路由時path有時候會加 '/' 有時候不加,以'/'開頭的會被當作根路徑，就不會一直嵌套之前的路徑。