淺談對路由的理解

什么是路由？

　　根據不同的url展示不同的頁面或者數據。

分類：路由分為前端路由和后端路由。

前端路由：主要用於單頁面的開發，根據用戶請求的地址來渲染不同的頁面。前端路由不會經過后端，而是根據hash值的變化進行頁面數據的渲染，所以不會刷新，不跳轉。

　　原理：通過hashRouter（onhashchange）或者history路由（h5 historyAPI）進行頁面的切換。

后端路由：根據用戶請求的路徑返回不同的頁面或數據。

 

routes：

　　它是路由配置的一些規則，是一個數組，數組中的每一個對象都是一個路由的配置項。

export const router=new VueRouter({ routes:[{},{},{}] })

 

 

<router-link>和<router-view>：

　　當路由配置成功后，VueRouter會提供2個內置組件用來做組件的顯示：

　　　　<router-link>：路由組件展示

　　　　<router-view>：路由的跳轉----to表示跳轉到哪里去，tag表示是什么標簽

<div id="app">
    <router-view></router-view>
    <router-link to="/home" tag="li"></router-link>
    <router-link to="/list" tag="li"></router-link>
</div>

 

路由跳轉的方式：

　　1、a標簽進行跳轉----<a href="#/home">首頁</a>

　　2、router-link進行跳轉----<router-link to="/home" tag="li">首頁</router-link>

　　　　　　當路由配置成功后，VueRouter會提供2個內置組件來做組件的顯示：<router-view></router-view>----路由組件展示    <router-link to="/home" tag="a"></router-link>----路由的跳轉（to表示到達的地方，tag表示渲染成什么標簽）

　　3、編程式路由----this.$router.back()----this.$router.push()----這兩個最終要

　　　　　　在created函數中this是VueComponent對象，這些方法都是原型中的方法

　　　　　　this.$router.back()　　后退

　　　　　　this.$router.forward()　　前進---一般不用

　　　　　　this.$router.push()　　跳轉

　　　　　　this.$router.go()　　指定跳轉---1表示前景，-1表示后退，0表示刷新

　　　　　　this.$router.replace()　　替換

 

路由傳值的方式：

　　1、動態路由傳值

　　　　例如：path:"/home/:id/name";  接受的時候通過 this.$route.params

　　　　①定義路由時，通過/:屬性/:屬性來定義傳遞的屬性

　　　　②路由跳轉時，通過/值/值將數據傳到對應的組件中

　　　　③在對應的組件內部通過this.$route.params進行數據的接收

　　2、query傳值。因為在url中？后面的參數不會被解析，因此我們可以通過query進行傳值。接收的時候通過 this.$route.query

　　3、路由解耦。在配置路由的時候添加props屬性為true,在需要接受參數的組件頁面通過props進行接受

　　4、編程式導航  this.$router.push({path:"/home",query:{}});

 

動態路由傳值和query傳值的區別：（是否需要傳遞參數）

　　動態路由中path:"/detail/:id/:name"----前端路由跳轉時必須要傳遞參數，如果沒有參數，那么對應的頁面不會顯示。

　　query中path:"/detail"----query傳值時不需要寫參數。

 

路由配置項常用的屬性及作用：

　　路由配置參數：

　　　　mode：hash----默認，地址欄中有#號，不需要后端配置，建議使用；history----地址欄中沒有#號，需要后端配置。

　　　　path：跳轉路徑

　　　　component：路徑相對於的組件

　　　　name：命名路由----在path:"/home"后面加一個name:"home"，用於動態路由傳值時以對象的形式傳值

　　　　meta：路由元信息

　　　　children：子路由的配置參數（路由嵌套）

　　　　props：路由解耦----在配置項中增加props:true

　　　　redirect：重定向路由

 

編程式導航使用的方法以及常用的方法：

　　路由跳轉：this.$router.push()

　　路由替換：this.$router.replace()

　　后退：this.$router.back()

　　前進：this.$router.forward()

　　指定跳轉：this.$router.go()

 

如何重定向路由？

　　配置路由中的redirect進行重定向

 

如何實現路由解耦？

　　在路由的配置項中設置props:true，在需要接受組件的內部通過props進行接受

 

$router和$toute的區別：

　　$route：當前路由的信息，fullPath、hash、matched、meta、params、path、query

　　$router：路由的實例對象，具有一些需要的方法，如編程式導航的跳轉

 

路由守衛：

　　路由鈎子函數，路由跳轉前的一些驗證。

　　全局守衛：beforeEach----實例VueRouter的方法，在index.js中用router調用。（局部守衛在各個頁面中寫在export default{ }中）

    router.beforeEach((to,from,next)=>{ document.title=to.meta.title; if(to.path!="/login" && to.meta.auth){ if(sessionStorage.getItem("token")){ next(); }else{ next("/login"); } }else{ next(); } });

 

　　局部守衛：

　　　　beforeRouteEnter：進入路由前的守衛，當前路由的鈎子函數中訪問不到this。

　　　　場景：登錄驗證、熱力圖、權限校驗、消息通知

 

 beforeRouteEnter(to,from,next){ //這里無法獲取this
        //to---去哪里 from---從哪里來 next()---跳轉
        next("/login"); next((vw)=>{//vw---VueComponent對象
 }); }

 

　　　　beforeRouteUpdate：路由更新時的守衛，當路由發生改變時，而當前組件沒有經歷創建和銷毀時就需要用到beforeRouteUpdate。

 

    //當點擊orderdetail頁面的水果切換時，地址欄更新而頁面不更新，解決：
 beforeRouteUpdate(to,from,next){ this.id=to.params.id; this.name=to.params.name; next(); }

 

　　　　除此之外，watch監聽$route的變化也能達到同樣的效果。

 watch: { "$route"(to,from){ this.id=to.params.id; this.name=to.params.name; } }

 

　　　　beforeRouteLeave：路由離開時的守衛

　　　　場景：未支付、未保存、答題系統、退出登錄

 

 beforeRouteLeave(to,from,next){ let flag=confirm("確定要離開嗎？"); if(flag) next(); }

 

 

 

路由懶加載：

　　1、異步組件的方式

　　2、ES6的import的方式