router 路由 什么是路由
路由，其實就是指向的意思，路由是根據不同的url地址指向不同的內容或頁面。在頁面中表現為兩個部分，一個是導航按鈕部分(點擊時改變url)，另一個是顯示內容部分(根據url不同，展示不同頁面)。在vue中我們頁面中所有內容都是組件化的，我們只要把路徑和組件對應起來就可以了。
路由中有三個基本的概念 route、routes、router
route 由這個英文單詞也可以看出來，它是單數，它表示一條路由。它是一個對象，主要由兩個部分組成：path(路徑) 和 component(組件)。如：{path:'/home', component: home}。開發時我們獲取路由的path(路徑)、query(參數)等信息時， 獲取的就是某一條路由的屬性，是通過 $route.path 來獲取（route 單數一條路由 不要記錯哈）
獲取路由信息
routes 多了個 s 代表很多個，所以它表示一組路由，我們所有的路由都需要在這個數組中聲明定義好，頁面中才可以使用。
定義路由
router是一個機制，相當於一個管理者，它來管理路由。因為routes 只是定義了一組路由，它放在哪里是靜止的，當用戶點擊home按鈕改變path時候，怎么辦 ？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 組件，所以頁面中就顯示了 home 內容。所以 當我們需要切換某一個頁面是 是使用 this.$router.push 告訴管理者router 我要跳轉。
路由管理者
路由的使用,切換路由
前面說過,路由分兩部分，一個是改變url，一個是顯示部分。當url改變的時候也就是path（或者name，通過一個名稱來標識一個路由，也稱命名路由）改變的時候 ，會去尋找routes[{ path: '/home', name: "Home", component: Home},...]表，通過path（或name）找到對應匹配的組件， 最后把組件渲染到 <router-view><router-view /> 標簽所在的地方。那有哪些改變path的方法呢？
頁面中使用跳轉
- <router-link to="/about">About</router-link> 對應的是path改變
- <router-link :to="{ name: 'About'}">About</router-link> 命名路由對應的是route中的 name
注意點 to 是綁定屬性 v-bing 簡寫 ：傳的是對象不是字符串
:to
js中使用跳轉
- this.$router.push({path:'/about'}) | this.$router.push({name:'About'})；跳轉到指定url路徑，並在history棧中添加一個記錄，點擊后退會返回到上一個頁面。
- this.$router.replace({path:'/about'}) | this.$router.replace({name:'About'}) ； replace跳轉時，history棧中不會有記錄，點擊返回會跳轉到上上個頁面。
- this.$router.go(n)//向前或者向后跳轉n個頁面，n可為正整數或負整數 -1上一頁面
使用路由切換時一些需要注意的點和錯誤
- 錯誤
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/about" - 原因是：在使用this.$router.push進行路由的跳轉時,
重復路由跳轉，比如說當前路由是關於我們頁面/about，但是點擊按鈕進行this.$router.push操作，要跳轉的還是'關於我們/about' 這個頁面。 - 解決辦法
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
重寫路由push方法
路由跳轉時 使用push方法 或者直接 router-link 都會增加
window.history.length(歷史紀錄)的長度 ，length谷歌一般最大50條，即 A頁面跳B頁面，B頁面跳A頁面,多次跳轉之后 點擊瀏覽器的返回上一頁按鈕，也會在AB兩個頁面多次跳轉（多次連續點擊跳轉同一頁面 history不會增加）
路由傳參及獲取url參數
路由傳參常用有兩種方式 params傳參、query傳參；通過路由的query屬性、params屬性就可以設置/獲取路由攜帶的參數。賦值給query和params的是一個對象。一般來說：和name配對的是params，和path配對的是query，獲取路由參數的則需要獲取對應的屬性 使用query時就用this.$route.query（在組件中直接$route.query獲取），同理使用params就用this.$route.params獲取；
設置路由
注意的點
-. name是可以和query搭配使用的，但是path 和 params 搭配使用時params會被忽略
-. 使用query時參數會出現在url中，使用params時不會出現在url中
-. 使用params時 刷新會丟失參數，query不會丟失
路由組件復用
在/about/a 跳轉 /about/b 時,會遇到頁面跳轉后數據竟然沒更新？原因是router管理者發現 這兩個路徑 匹配的時是同一個組件,這時vue就會去復用同一個組件,因為比起銷毀再創建，復用則顯得更加高效。不過，這也意味着組件的生命周期鈎子不會再被調用、我們的created、mounted等就不會觸發數據也就不會改變；解決這個問題就需要使用route進行監聽觀察
watch: {
'$route' (to, from) {
// to 到那一條路由
//from 從那一條路由過來
//不一定非要用to 和from 可以是使用 a b
}
}
路由從定向
當遇到/about路徑時 通過redirect屬性讓我們的/about指向一個新的路徑，最總指向新的組件，我們在about添加的參數也會隨着附加到新路徑上。
路由從定向
路由嵌套 子路由
組件是在 router-view 標簽中顯示的，默認所有routes第一維度數組中的component都在 App.vue的router-view中顯示。舉個例子，頁面頭部有home，about等導航欄，當我們進入about頁面中，about側邊又有菜單，點擊側邊菜單時希望在about頁面中進行不同內容的切換，這個時候就可以使用嵌套子路由 ，使用children屬性 添加子路由，children是一個數組，里面的每一個對象就是一條路由。
路由嵌套
以 / 開頭的嵌套路徑會被當作根路徑
路由模式
路由 有hash 模式 和history 模式，這兩種模式路由的添加，查詢，聲明都是一樣的 只是會在url地址欄表現得不一樣。這里的 hash 就是指 url 尾巴后的 # 號以及后面的字符，hash 也 稱作 錨點，本身是用來做頁面定位的，它可以使對應 id 的元素顯示在可視區域內。
路由模式聲明
hash 模式 和history 模式 可以實現
- 改變url且不讓瀏覽器向服務器發出請求
- 監測 url 的變化
- 截獲 url 地址，並解析出需要的信息來匹配路由規則
需要注意的是hash值變化瀏覽器不會重新發起請求，但是會觸發window.hashChange事件；history模式改變回去請求服務器的所以需要后端配合將所有訪問都指向index.html，否則用戶刷新頁面，會導致404錯誤（就是如果找不到該頁面就返回index）