$router和$route的區別
Vue Router是Vue.js的路由管理器，路由就是SPA單頁應用的訪問路徑，在Vue實例內部，可以通過$router訪問路由實例，即在路由定義文件中export default的new Router(/*...*/)路由實例，通過$route可以訪問當前激活的路由的狀態信息，包含了當前URL解析得到的信息，還有URL匹配到的路由記錄，可以將$router理解為一個容器去管理了一組$route，而$route是進行了當前URL和組件的映射。
$router對象屬性
$router.app: 配置了router的Vue根實例。$router.mode: 路由使用的模式。$router.currentRoute: 當前路由對應的路由信息對象。
$router對象方法
$router.beforeEach(to, from, next): 全局前置守衛，守衛是異步解析執行，此時導航在所有守衛resolve完之前一直處於等待中狀態，守衛方法接收三個參數:to: Route即將要進入的目標路由對象、from: Route: 當前導航正要離開的路由、next: Function: 調用該方法來resolve這個鈎子，執行效果依賴next方法的調用參數，例如next()、next(false)、next('/')、next({path:'/',name:'home',replace:true,query:{q:1}})、next(error)等，通常在main.js中import的Vue Router實例中直接定義導航守衛，當然也可在Vue實例中訪問$router來定義。$router.beforeResolve(to, from, next): 全局解析守衛，在beforeRouteEnter調用之后調用，同樣接收to、from、next三個參數。$router.afterEach(to, from): 全局后置鈎子，進入路由之后調用，接收to、from兩個參數。$router.push(location[, onComplete[, onAbort]]): 編程式導航，使用$router.push方法導航到不同的URL，此方法會向history棧添加一個新的記錄，當點擊瀏覽器后退按鈕時，則回到之前的URL。$router.replace(location[, onComplete[, onAbort]]): 編程式導航，跟$router.push很像，唯一的不同就是，其不會向history添加新記錄，而是跟它的方法名一樣替換掉當前的history記錄。$router.go(n): 編程式導航，這個方法的參數是一個整數，意思是在history記錄中向前或者后退多少步，類似window.history.go(n)。$router.back(): 編程式導航，后退一步記錄，等同於$router.go(-1)。$history.forward(): 編程式導航，前進一步記錄，等同於$router.go(1)。$router.getMatchedComponents([location]): 返回目標位置或是當前路由匹配的組件數組 ，是數組的定義或構造類，不是實例，通常在服務端渲染的數據預加載時使用。$router.resolve(location[, current[, append]]): 解析目標位置，格式和<router-link>的to prop相同，current是當前默認的路由，append允許在current路由上附加路徑，如同router-link。$router.addRoutes(route): 動態添加更多的路由規則，參數必須是一個符合routes選項要求的數組。$router.onReady(callback[, errorCallback]): 該方法把一個回調排隊，在路由完成初始導航時調用，這意味着它可以解析所有的異步進入鈎子和路由初始化相關聯的異步組件，這可以有效確保服務端渲染時服務端和客戶端輸出的一致，第二個參數errorCallback會在初始化路由解析運行出錯時被調用。$router.onError(callback): 注冊一個回調，該回調會在路由導航過程中出錯時被調用，被調用的錯誤必須是下列情形中的一種，錯誤在一個路由守衛函數中被同步拋出、錯誤在一個路由守衛函數中通過調用next(err)的方式異步捕獲並處理、渲染一個路由的過程中需要嘗試解析一個異步組件時發生錯誤。
$route對象屬性
$route.path: 返回字符串，對應當前路由的路徑，總是解析為絕對路徑。$route.params: 返回一個key-value對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個空對象。$route.query: 返回一個key-value對象，表示URL查詢參數。$route.hash: 返回當前路由的帶#的hash值，如果沒有hash值，則為空字符串。$route.fullPath: 返回完成解析后的URL，包含查詢參數和hash的完整路徑。$route.matched: 返回一個數組，包含當前路由的所有嵌套路徑片段的路由記錄，路由記錄就是routes配置數組中的對象副本。$route.name: 如果存在當前路由名稱則返回當前路由的名稱。$route.redirectedFrom: 如果存在重定向，即為重定向來源的路由的名字。
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://router.vuejs.org/zh/api/#routes
https://juejin.im/post/6844903665388486664
https://juejin.im/post/6844903608534695943
https://juejin.im/post/6844903892560379917
https://juejin.im/post/6844904005236162568
https://segmentfault.com/a/1190000016662929