1. $route對象
$route.png
1.1 $route 表示(當(dāng)前路由信息對象)
表示當(dāng)前激活的路由的狀態(tài)信息，包含了當(dāng)前 URL 解析得到的信息怕午，還有 URL 匹配到的 route records（路由記錄）郁惜。
路由信息對象：即$router會(huì)被注入每個(gè)組件中，可以利用它進(jìn)行一些信息的獲取兆蕉。
**1.$route.path**
字符串虎韵，對應(yīng)當(dāng)前路由的路徑，總是解析為絕對路徑包蓝，如 "/foo/bar"测萎。
**2.$route.params**
一個(gè) key/value 對象，包含了 動(dòng)態(tài)片段 和 全匹配片段逊抡，
如果沒有路由參數(shù)零酪，就是一個(gè)空對象。
**3.$route.query**
一個(gè) key/value 對象孝凌，表示 URL 查詢參數(shù)月腋。
例如，對于路徑 /foo?user=1片拍，則有 $route.query.user == 1妓肢，
如果沒有查詢參數(shù)，則是個(gè)空對象纲缓。
**4.$route.hash**
當(dāng)前路由的 hash 值 (不帶 #) ，如果沒有 hash 值栗弟，則為空字符串工闺。錨點(diǎn)
**5.$route.fullPath**
完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑耿焊。
**6.$route.matched**
數(shù)組遍搞，包含當(dāng)前匹配的路徑中所包含的所有片段所對應(yīng)的配置參數(shù)對象溪猿。
**7.$route.name 當(dāng)前路徑名字**
**8.$route.meta 路由元信息
1.2 route object 出現(xiàn)在多個(gè)地方:
(1)在組件內(nèi)，即 this.$route
(2)在 $route 觀察者回調(diào)內(nèi) router.match(location) 的返回值
(3)導(dǎo)航守衛(wèi)的參數(shù)：
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息對象
})
watch: {
$route(to, from) {
// to 和 from 都是 路由信息對象
}
}
2. $router對象
$router.png
全局的路由實(shí)例讲弄，是router構(gòu)造方法的實(shí)例避除。
在 Vue 實(shí)例內(nèi)部胸嘁，你可以通過 $router 訪問路由實(shí)例
const router = new Router({
routes: [
{
path: "/",
name: "首頁",
redirect: '/home'
},
{
path: '/login',
name: 'Login',
component: Login
},
{ path: '*', component: NotFoundComponent }
],
linkActiveClass: "active-router",
linkExactActiveClass: "exact-router"
})
2.1 全局掛載路由實(shí)例
// 全局注冊的路由
Vue.use(VueRouter)
2.2 路由實(shí)例方法push
// 字符串
this.$router.push('home')
// 對象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)性宏，變成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
push方法其實(shí)和<router-link :to="...">是等同的。
注意：push方法的跳轉(zhuǎn)會(huì)向 history 棧添加一個(gè)新的記錄书斜，當(dāng)我們點(diǎn)擊瀏覽器的返回按鈕時(shí)可以看到之前的頁面酵使。
2.2 路由實(shí)例方法go
// 頁面路由跳轉(zhuǎn) 前進(jìn)或者后退
this.$router.go(-1) // 后退
2.3 路由實(shí)例方法replace
//push方法會(huì)向 history 棧添加一個(gè)新的記錄，而replace方法是替換當(dāng)前的頁面凝化，
不會(huì)向 history 棧添加一個(gè)新的記錄
<router-link to="/05" replace>05</router-link>
// 一般使用replace來做404頁面
this.$router.replace('/')
更多路由實(shí)例的信息，參考https://router.vuejs.org/zh/
