路由原理
傳統開發方式 url改變後 立刻發起請求，響應整個頁面，渲染整個頁面
SPA 錨點值改變後 不會發起請求,發起ajax請求,局部改變頁面數據
頁面不跳轉 用戶體驗更好
SPA
single page application(單頁應用程序)
前端路由
錨點值監視
ajax獲取動態數據
-
核心點是錨點值
前端框架 Vue/angular/react都很適合開發單頁應用
基本使用
vue-router
其是vue的核心插件
1:下載 npm i vue-router -S
1.5(重要):安裝插件Vue.use(VueRouter);
2:在main.js中引入vue-router對象 import VueRouter form './x.js';
3:創建路由對象 var router = new VueRouter();
4:配置路由規則 router.addRoutes([路由對象]);
路由對象{path:'錨點值',component:要(填坑)顯示的組件}
5:將配置好的路由對象交給Vue
在options中傳遞-> key叫做 router
6:留坑(使用組件)
router-link
to點我
幫助我們生成a標籤的href
錨點值代碼維護不方便，如果需要改變錨點值名稱
則需要改變 [使用次數 + 1（配置規則）] 個地方的代碼
命名路由
1:給路由對象一個名稱 { name:'home',path:'/home',component:Home}
2:在router-link的to屬性中描述這個規則
通過名稱找路由對象，獲取其path，生成自己的href
大大降低維護成本，錨點值改變只用在main.js中改變path屬性即可
參數router-link,
Vue.prototype.xxx = {add:fn}
所有組件中，使用this.xxx就能拿到這個對象
查詢字符串
1:配置:to="{name:'detail',query:{id:hero.id} }"
2:規則 {name:'detail',path:'/detail',component:Detail}
3:獲取 this.$route.query.id
path方式
1:配置 :to="{name:'detail',params:{id:hero.id} }"
2:規則 { name:'detail',path:'/detail/:id'}
-
3:獲取 this.$route.params.id
查詢字符串配置參數
router-link一次
獲取的時候一次
path方式配置參數
router-link一次
規則配置的時候聲明位置
獲取的時候一次
總結書寫代碼注意事項
path方式需要在路由規則中聲明位置
別名
/a的別名是/b，意味著當用戶訪問/b時，URL會保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣。
{ path: '/a', component: A, alias: '/b' }
重定向
// 方式一：字符串路徑path
{ path: '/a', redirect: '/b' }
// 方式二：name
{ path: '/a', redirect: {name: 'b'} }
// 方式三：動態返回重定向目標
{ path: '/a', redirect: to => {
// 方法接收 目標路由 作為參數；return 重定向的 字符串路徑/路徑對象
}}
階段總結
vue-router使用步驟 : 1:引入 2:安裝插件 3:創建路由實例 4:配置路由規則 5:將路由對象關聯vue 6:留坑
router-link to="/xxx" 命名路由
在路由規則對象中 加入name屬性
在router-link中 :to="{ name:"xxx'} "
$route 路由信息對象,只讀對象
$router 路由操作對象,只寫對象
下圖來自vue-router源碼
Vue.use(插件對象); // 過程中會註冊一些全局組件,及給vm或者組件對象掛在屬性
給vm及組件對象掛載的方式 : Object.defineProperty(Vue.prototype,'$router',{
get:function () { return 自己的router對象;
}
})
嵌套路由
需要根據錨點值的改變，僅僅變化上圖中的Profile到Posts組件，即可使用嵌套路由
代碼思想
router-view第一層中，包含一個router-view
1:router-view的細分
2:每一個坑挖好了，要對應單獨的組件
使用須知: 1:router-view包含router-view 2:路由children路由
路由守衛
它其實就是一個路由改變的事件回調函數
全局路由守衛
前置router.beforeEach((to, from,next) => {})
後置router.afterEach((to, from) => {})
路由獨享的守衛
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) =>{
// ...
}
}
]
})組件內的守衛
1:路由配置
{path:"/xxx/:id"}
2:router-link
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
// 但是，可以這樣用
next(vm => {
// 通過 `vm` 訪問組件實例-> 未來的組件this
vm.msg = '數據在此';
})
},
beforeRouteUpdate (to, from, next) {
// 觸發條件見下文
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
}beforeRouteUpdate的觸發條件(動態路由參數變化時)
next
next('/xxx')
// 或者
next({name:'路由對象的name屬性'});放行next();
取消本次導航（url恢復成點擊前的）next(false)
-
重定向
to||from
該對象中的.fullPath屬性比較常用，也就是當前的url
守衛meta屬性的應用
路由meta元數據 -> meta是對於路由規則是否需要驗證權限的配置
路由對象中 和name屬性同級 { meta:{ isChecked:true } }
路由鉤子 -> 權限控制的函數執行時期
每次路由匹配後, 渲染組件到router-view之前
router.beforeEach(function(to,from,next) {
// 判斷to或from的fullPath即可
} )
編程導航
1: 跳到指定的錨點,並顯示頁面 this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
2: 配置規則 {name:'xxx',path:'/xxx/:name'}
3: 根據歷史記錄.前進或後退
this.$router.go(-1|1);
1代表進一步,-1是退一步
過渡效果及緩存
我們需要在路由改變時變化頁面，ok！同時我們希望加上一些淡入淡出等效果，就可以用上transition內置組件
另外,考慮到緩存問題，就加上keep-alive組件結合使用
因此，你看到是這樣的
transition及keep-alive詳情參考文檔中《內置組件》部分
最後附上實現原理
