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:"

    components:{App}

})

5. 利用router-view來指定路由切換的位置

6. 時候router-link來建立切換的工具，會渲染成a標籤，添加to屬性來設置更改的path信息，且會根據當前路由的變化爲a標籤添加對應的router-link-active/router-link-exact-active(徹底匹配成功)類名

.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來指定（指定在父級路由組件的模板中）

默認路由和重定向

當咱們進入應用，默認想顯示某一個路由組件，或者當咱們進入某一級路由組件的時候其某一個子路由組件，咱們能夠配置路由：

{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/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"},  

            ]

        }

    ]

})

 動態路由匹配

有時候咱們須要在路由跳轉的時候跟上參數，路由傳參的參數主要有兩種：路由參數、queryString參數。

路由參數須要在路由表裏設置

{path:'/user/:id',component:User}

上面的代碼就是給User路由配置接收id的參數，多個參數繼續在後面設置

在組件中能夠經過this.$route.params來使用

queryString參數不須要在路由表設置接收，直接設置 ？ 後面的內容，在路由組件中經過this.$route.query接收

正在熱映...

<router-link

    v-for="data in datalist"

    :key="data"

    :to="{

        name:'detail',

        params:{id:data},

        query:{title:'文章二'}

    }"

    tag="li"

>

{{data}}

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屬性，默認寫的是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`

}