vue-router詳解

路由（vue-router）

現在的應用都流行SPA應用（single page application）
傳統的專案大多使用多頁面結構，需要切換內容的時候我們往往會進行單個HTML檔案的跳轉，這個時候網路、性能影響，瀏覽器會出現不定時間的空白界面，用戶體驗不好
單頁面應用就是用戶通過某些操作地址欄url之后，動態的進行不同模板內容的無重繪切換，用戶體驗好，
Vue中會使用官方提供的vue-router插件來使用單頁面，原理就是通過檢測地址欄變化后對應的路由組件進行切換（卸載和安裝）  

簡單路由實作

cnpm install vue-router -S  or yarn add vue-router
在Vue中，$router指向的是大路由，routes是路由配置陣列， $route指向的是當前活躍的路由，
1.引入vue-router,如果是在腳手架中，引入VueRouter之后，需要通過Vue.use來注冊插件 router/index.js檔案
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
2.創建router路由器
new Router({     routes:[         {path:"/home",component:Home}     ] })
3.創建路由表并配置在路由器中
var routes =[     {path,component}//path為路徑，component為路勁對應的路由組件 ]
var router = new Router({     routes })
export default router
4.在根實體里注入router,目的是為了讓所有的組件里都能通過this.$router、this.$route來使用路由的相關功能api
import router from "./router" new Vue({     el:"#app",     router, //注冊一下  讓組件可以通過this.$router or this.$route 使用路由相關的api屬性或方法     template:"<App/>",     components:{App} })
5. 利用router-view來指定路由切換的位置 6. 時候router-link來創建切換的工具，會渲染成a標簽，添加to屬性來設定更改的path資訊，且會根據當前路由的變化為a標簽添加對應的router-link-active/router-link-exact-active(完全匹配成功)類名
<router-link to="/main">main</router-link> <router-link to="/news">news</router-link>
.router-link-active{     color:red; }

路由的懶加載

懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載，在單頁應用中，如果沒有應用懶加載，運用webpack打包后的檔案將會例外的大，造成進入首頁時，需要加載的內容過多，延時過長，不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，堅守首頁加載用時，
非按需加載則會把所有的路由組件塊的js打包在一起，當業務包很大的時候建議用路由的按需加載（懶加載）， 按需加載會在頁面第一次請求的時候，把相關路由組件塊的js添加上：
{     path:'/about',     name:'about',     component:()=>import('@/views/About') //采用了路由懶加載方式 }

多級路由

在創建路由表的時候，可以為每一個路由物件創建children屬性，值為陣列，在這個里面又可以配置一些路由物件來使用多極路由，注意：一級路由path前加“/"
const routes =[     {path:"/main",component:AppMain},     {path:"/news",component:AppNews,children:[         {path:'inside',component:AppNewsInside},         {path:'outside',component:AppNewsOutside}     ]}, ]
二級路由組件的切換位置依然由router-view來指定（指定在父級路由組件的模板中）
<router-link to='inside'>inside</router-link> <router-link to='outside'>outside</router-link>
<router-view></router-view>

默認路由和重定向

當我們進入應用，默認想顯示某一個路由組件，或者當我們進入某一級路由組件的時候其某一個子路由組件，我們可以配置路由：
{path:'',component:Main}
當我們需要進入之后進行重定向到其他路由的時候，或者url與路由表不匹配的時候：
{path:'/',redirect:'/main'} ///...放在最下面 {path:'*',redirect:'/main'}

命名路由

我們可以給路由物件配置name屬性，這樣的話，我們在跳轉的時候直接寫name:main就會快速的找到此name屬性對應的路由，不需要寫大量的url path路徑了
<router-link v-for="nav in navs" :key="nav.id" :to="{name:nav.name}" > {{nav.title}}</router-link>
//router/index.js的配置 var router= new VueRouter({     routes:[         {             path:"xxx",             component:xxx,             children:[                 {path:"guonei",component:()=>import("@/views/Guonei"),name:"guonei"},                           {path:"guoji",component:()=>import("@/views/guoji"),name:"guoji"},  
            ]         }     ] })
<script>     export default {         data(){             return {                 navs:[                     {id:1,title:"國內新聞",name:'guonei'},                     {id:2,title:"國際新聞",name:'guoji'}                 ]             }         }     } </script>

 動態路由匹配

有時候我們需要在路由跳轉的時候跟上引數，路由傳參的引數主要有兩種：路由引數、queryString引數， 路由引數需要在路由表里設定 {path:'/user/:id',component:User} 上面的代碼就是給User路由配置接收id的引數，多個引數繼續在后面設定 在組件中可以通過this.$route.params來使用 queryString引數不需要在路由表設定接收，直接設定 ？ 后面的內容，在路由組件中通過this.$route.query接收
<div > 正在熱映... <!-- <ul>     <li     v-for="data in datalist"     :key="data"     @click="toDetail(data)"     >{{data}}</li> </ul> -->
<!-- <ul> <router-link v-for="data in datalist" :key="data" :to="'/detail/'+data+'?title=文章一'" tag="li" > {{data}} </router-link> </ul> -->
<ul> <router-link     v-for="data in datalist"     :key="data"     :to="{         name:'detail',         params:{id:data},         query:{title:'文章二'}     }"     tag="li" > {{data}} </router-link> </div>
<script> data(){     return{         datalist:['11','22','33']     } } </script>
router.js
{     name:"detail",     path:"/detail/:id",     component:Detail }

prop將路由與組件解耦

在組件中接收路由引數需要this.$route.params.id代碼冗余，現在可以在路由表里配置props:true {path:'detail/:id',component:AppNewsDetail,name:'detail',props:true} 在路由自己中可以通過props接收id引數去使用了 props:['id']

宣告式導航router-link

<router-link>組件支持用戶在具有路由功能的應用中（點擊）導航，通過to屬性指定目標地址，默認渲染成帶有超鏈接的<a>標簽，可以通過配置tag屬性生成別的標簽，另外，當目標路由成功激活時，鏈接元素自動設定一個表激活的css類名，
router-link的to屬性，默認寫的是path(路由的路徑)，可以通過設定一個物件，來匹配更多
:to='{name:"detail",params:{id:_new.id},query:{content:_new.content}}'
name是要跳轉的路由的名字，也可以寫path來指定路徑，但是path的時候就不能使用params傳參，params是傳路由引數query傳queryString引數 replace屬性可以控制router-link的跳轉不被記錄 active-class屬性可以控制路徑切換的時候對應的router-link渲染的dom添加的類名

編程是導航

有的時候需要在跳轉前進行一些動作，router-link直接跳轉，需要在方法里面使用$router的方法 this.$router.push()
#### 路由模式 為了構建SPA（單頁面應用），需要引入前端路由系統，這也就是Vue-router存在的意義，前端路由的核心，就在于---改變視圖的同時不會向后端發出請求，
路由有兩種模式：hash、history,默認會使用hash模式，但是如果url里面不想出現丑陋hash值，在new VueRouter的時候配置mode值為history來改變路由模式，本質使用H5的history.pushState方法來更改url，不會引起重繪，
history模式，會出現404的情況，需要后臺配置 因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置當用戶瀏覽器直接訪問 http://oursite.com/user/id 就會回傳 404，這就不好看了， 所以要在服務端增加一個覆寫所有情況的候選資源：如果URL匹配不到任何靜態資源，則應該回傳同一個index.html頁面，這個頁面就是你app的依賴頁面
路由原理： hash路由 ====> window.onhashchange監聽路徑的切換 history路由 ====> window.onpopstate監聽路徑的切換
#### 路由守衛 在某些情況下，當路由跳轉前或跳轉后、進入、離開某一個路由前、后，需要做某些操作，就可以使用路由鉤子來監聽路由的變換

 全域路由鉤子

//進入到某個路由組件之前 router.beforeEach((to,from,next)=>{     //會在任意路由跳轉前執行，next一定要記著執行，不然路由不能跳轉了 console.log('beforeEach') console.log(to,from) next() })
//進入到某個路由組件之后 router.afterEach((to,from)=>{     //會在任意路由跳轉后執行     console.log('afterEach') })

 單個路由鉤子：

只有beforeEnter,在進入前執行，to引數就是當前路由
routes:[     {         path:'/foo',         component:Foo,         //當進入到foo路由之前，就會觸發         beforeEnter:(to,from,next)=>{             //...             next()//必須執行next之后，對應的Foo組件才可以正常顯示出來         }     } ]

路由組件鉤子：

//進入到某個組件之前的攔截，獲取不到組件內部的this beforeRouteEnter(to,from,next){     //在渲染該組件的對應路由被 confirm前呼叫     //不能獲取組件實體`this`     //因為當守衛執行前，組件實體還沒有被創建 },
beforeRouteUpdate(to,from,next){     //在當前路由改變，但是該組件被復用時呼叫     //舉例來說，對于一個帶有動態引數的路徑/foo/:id,在/foo/1和/foo/2之間跳轉的時候，     //由于會渲染同樣的Foo組件，因此組件實體會被復用，而這個鉤子就會在這個情況下被呼叫，     //可以訪問組件實體`this` }, //離開某個組件前的攔截，獲取到組件內部的this beforeRouteLeave(to,from,next){     //導航離開該組件的對應路由時呼叫     //可以訪問實體`this` }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/3993.html

標籤：HTML5

上一篇：組件間的傳值

下一篇：HTML5新元素