vue// 步驟1：引入vue.js和vue-router.js庫
// 步驟2：創建組件 Vue.component 或簡寫 {template:HTML代碼}
// 步驟3：聲明組件路由 new VueRouter
//步驟4：在new Vue里面注冊激活路由
// 步驟5：挖坑顯示 <router-view />
//path：路徑，
// name：標識后期跳轉使用
// component：加載組件，
// redirect：路徑用來重定向跳轉
// alias：別名 就是有兩個網址
跳轉頁面
<router-link to='/' >內容</router-link>
路由就是網址
路由參數就是網址參數
根據路由參數的不同顯示不同的內容不同的組件
路由重定向是利用了
new VueRouter({
routes: [
{path,'路由網址 /:穿參的參數名'
name, 名字
component 對應的組件
redirect 跳轉到指定網頁
, alias 別名
}
....
]
})
多學一招：path里面可以通過*通配my-*
匹配my-開頭的路由*
匹配所有路徑
- 組件使用（在HTML中）：{{ $route.params.參數名}}
- 組件使用（在 JS中）：this.$route.params.參數名
created 監聽第一次路由的變化
beforeRouteUpdate (newData, oldData, next) {
// react to route changes...
// don't forget to call next()
// next() 向下匹配
}
你說下vue路由模式有幾種
2種，分別是hash、history （注：mode）
你說下vue路由原理？
是這樣的
vue路由是基於單頁面應用SPA思想/規則實現的
原理呢
基於BOM的location和history實現的
hash
location.hash = 值
location.onhashchange = 處理函數
history
history.pushState = 值
history.onpopstate = 處理函數
那你說下什么是單頁面應用SPA，有點缺點
單頁面應用是一個思想/規則，
主要規定頁面局部刷新，從而減少HTTP請求 加快頁面響應速度，提高用戶體驗度
有個缺點：不利於SEO優化（注：seo百度能夠找到你）
注：這個技術可以解決vue 單頁面應用 seo優化問題 nuxt.js
什么是動態路由匹配：監控路由參數變化
應用場景：商品詳情頁 根據路由參數獲取最新數據
語法：從手冊復制
鑲嵌路由是指父鑲嵌子
父挖坑埋子
默認監聽范圍埋父
視圖路由指同級顯示多個路由
