vue(5)---路由--2019.5.24學習筆記

路由
根據用戶請求路徑的不一樣返回不一樣的頁面或者數據

前端路由
不會通過服務器 根據hash值一個變化切換不一樣的頁面 路由切換頁面的時候頁面是不會刷新

在vue中使用插件的步驟
1.引入vue
2.引入插件
3.使用插件 Vue.use()

當路由配置成功之後Vue中就會多了兩個內置組件
<router-view></router-view> 當路徑匹配成功後 router-view用來顯示相對應的組件
<router-link></router-link>
1.作路由的跳轉 必需要添加一個屬性 to:跳轉的路徑
2.除此以外 router-link 身上還有一個tag屬性 指定router-link渲染成指定的標籤

路由的配置
mode:路由的形式 hash路由 history路由
通常用hash路由 使用history路由,須要進行後端配置
routes:[] 每個路由頁面的配置項

routes中的配置項
path:"路徑匹配的路徑"
component:當路徑匹配成功須要渲染的組件
redirect:重定向
children:路由嵌套的配置項 這個屬性和routes同樣 嵌套二級路由
路由嵌套中path只須要寫路徑名稱便可
應用:只變化內容區時可以使用
name:當前路由的名稱
props:路由解耦

路由傳值的方式:
一.動態路由
傳值
1.定義路由時,設置傳遞數據的key值 path:"/路由地址/:key1/key2" key1 key2表明數據的鍵值
2.在作路由跳轉的時候定義傳遞的數據 to="/路由地址/參數1/參數2"
3.在須要接收信息的組件內部經過this.$route.params進行接收
二.query傳值
流程:
1.經過query的方式進行數據的傳參 key=val&key=val
所謂的query傳值其實就是咱們常說的get傳值的方式 經過?後面進行拼接
2.接收的時候經過this$route.query進行接收
三.路由解耦(只適合動態路由傳值)
1.在定義路由的時候添加一個屬性props:true
2.接受的時候只須要經過props進行接收便可
query傳值 和params傳值 的區別?
前者的參數可傳可不傳
params用的比較多,參數是必需要傳遞的

編程式導航
路由跳轉的方式
1.a標籤跳轉 <a href="#/須要跳轉的頁面"></a>
2.組件 router-link
3.編程式導航 經過js進行路由的跳轉
this.$rounte.push 跳轉
this.$rounte.back 後退
this.$rounte.forward 前進
this.$rounte.replace 替換

單頁面開發和多頁面開發優缺點
單頁面開發:SPA 只有一個主頁面的應用，瀏覽器一開始要加載全部必須的 html, js, css
優勢:
1.良好的交互體驗
2.良好的先後端工做分離模式
3.減輕服務器壓力
缺點:
1.不利於SEO優化
2.不能使用前進後退功能
3.初次加載耗時長
4.頁面複雜度高

多頁面開發:MPA 一個應用中有多個頁面，頁面跳轉時是整頁刷新
優勢:
1.內容承載率大
2.有利於SEO優化
3.開發成本低
缺點:
1.代碼重複度大
2.網站後期維護難度大
3.頁面之間的跳轉用時長,用戶體驗差