分析Vue-Router路由與配置

這篇文章主要介紹“分析Vue-Router路由與配置”，在日常操作中，相信很多人在分析Vue-Router路由與配置問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”分析Vue-Router路由與配置”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

現(xiàn)在的很多應(yīng)用都流行SPA應(yīng)用（singe page application) 。傳統(tǒng)的項(xiàng)目大多使用多頁(yè)面結(jié)構(gòu)，需要切換內(nèi)容的時(shí)候我們往往會(huì)進(jìn)行單個(gè)html文件的跳轉(zhuǎn)，這個(gè)時(shí)候因受到網(wǎng)絡(luò)、性能的影響，瀏覽器會(huì)出現(xiàn)不定時(shí)間的空白界面，用戶(hù)體驗(yàn)不好。而單頁(yè)應(yīng)用則是用戶(hù)通過(guò)某些操作更改地址欄url之后，動(dòng)態(tài)的進(jìn)行不同模板內(nèi)容的無(wú)刷新切換，用戶(hù)體驗(yàn)好。而在vue2.0版本后，vue官方推出vue-router插件來(lái)實(shí)現(xiàn)單頁(yè)面的路由跳轉(zhuǎn)，內(nèi)部原理就是通過(guò)組件之間的切換（組件的卸載與安裝）去實(shí)現(xiàn)整個(gè)頁(yè)面無(wú)刷新的效果。

一．項(xiàng)目引入路由并配置：

1.在vue項(xiàng)目中，通過(guò)cnpm或者yarn的方式進(jìn)行vue-router的安裝

cnpm i vue-router -S

yarn add vue-router -S

       2.接下來(lái)需要在入口文件main.js里面進(jìn)行路由的引入與注冊(cè)

        import Vue from 'vue'

        import Router from 'vue-router'

        Vue.use(Router)

3. 創(chuàng)建router路由器

    new Router({

      routes:[

        {path:"",component:}

      ]

    })

4. 創(chuàng)建路由表并配置在路由器中

    var routes = [

//path為路徑，component為路徑對(duì)應(yīng)的路由組件

        {path,component}

    ]

    new Router({

        routes

    })

5. 在根實(shí)例里注入router,目的是為了讓所有的組件里都能通過(guò)this.$router、this.$route來(lái)使用路由的相關(guān)功能api

 new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: { App }

    })

6. 利用router-view來(lái)指定路由切換的位置

7. 使用router-link來(lái)創(chuàng)建切換的工具，會(huì)渲染成a標(biāo)簽，添加to屬性來(lái)設(shè)置要更改的path信息，且會(huì)根據(jù)當(dāng)前路由的變化為a標(biāo)簽添加對(duì)應(yīng)的router-link-active/router-link-exact-active（完全匹配成功）類(lèi)名

<router-link to="main">main</router-link>

<router-link to="news">news</router-link>

.router-link-active{

    color:red;

}

項(xiàng)目中多級(jí)路由配置：

在創(chuàng)建路由表的時(shí)候，可以為每一個(gè)路由對(duì)象創(chuàng)建children屬性，值為數(shù)組，在這個(gè)里面又可以配置一些路由對(duì)象來(lái)使用多級(jí)路由，注意：只在一級(jí)路由的path前加 '/ '

const routes = [

  {path:'/home,component:Home},

  {path:'/list',component:List,children:[

    {path:'inner',component:Inner},

    {path:'outer',component:Outer}

  ]},

]

二級(jí)路由組件的切換位置依然由router-view來(lái)指定（指定在父級(jí)路由組件的模板中）

<router-link to='/home/inner'>inner</router-link>

<router-link to='/home/outer'>outer</router-link>

<router-view></router-view>

      但是這樣發(fā)現(xiàn)當(dāng)路由路徑多級(jí)的時(shí)候，不利于快速定位路由匹配的組件。所以，可以通過(guò)命名路由的方式去實(shí)現(xiàn)以上代碼。

我們可以給路由對(duì)象配置name屬性，當(dāng)我們?cè)谔D(zhuǎn)的時(shí)候直接寫(xiě)name:inner就會(huì)快速的找到此name屬性所對(duì)應(yīng)的路由，不需要寫(xiě)大量的urlpath路徑了。如下所示：

{path:'inner',component:Inner,name:'inner'}

這樣的話(huà)，我們就可以方便的根據(jù)路由的不同進(jìn)行組件之間的映射。但是，做大型項(xiàng)目開(kāi)發(fā)的時(shí)候，我們也會(huì)發(fā)現(xiàn)很多的路由寫(xiě)在routes這個(gè)里面，會(huì)讓router這個(gè)文件變得很大不利于維護(hù)管理。除此之外，如果通過(guò)這樣的方式還會(huì)導(dǎo)致當(dāng)用戶(hù)打開(kāi)首頁(yè)的話(huà)，因?yàn)閣ebpack打包的時(shí)候，加載內(nèi)容異常的多導(dǎo)致打開(kāi)速度很慢。所以我們需要對(duì)我們的路由采取懶加載的方式進(jìn)行引入：

const routes = [

homeRouter

 ]

//homeRouter.js文件里面

export defult {

  Name:’homeRouter’,

  Path:’/home’

  component:() => import('./my-async-component')}

}

Vue-Router的路由守衛(wèi)：

在項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常會(huì)在路由跳轉(zhuǎn)前后做一些操作。例如我們可以通過(guò)利用vue-router里面提供的路由守衛(wèi)結(jié)合axios攔截器實(shí)現(xiàn)項(xiàng)目的登錄攔截等操作。Vue-router里面提供的路由守衛(wèi)可以分為三大類(lèi)，分別是全局路由守衛(wèi)、單個(gè)的路由鉤子的路由守衛(wèi)、路由組件內(nèi)部的路由守衛(wèi)。好，我們依次來(lái)看：

通過(guò) router.beforeEach 或者router.afterEach注冊(cè)一個(gè)全局守衛(wèi)：

1-1

 router.beforeEach((to, from, next) => {

    //會(huì)在任意路由跳轉(zhuǎn)前執(zhí)行，next一定要記著執(zhí)行，不然路由不能跳轉(zhuǎn)了

  next()

})

守衛(wèi)方法需要接受三個(gè)參數(shù)：to、from、next

to:即將要進(jìn)入的目標(biāo)對(duì)象

From:當(dāng)前導(dǎo)航正要離開(kāi)的路由

Next: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。

1-2

//會(huì)在任意路由跳轉(zhuǎn)后執(zhí)行  

Router.afterEach((to,from)=>{

})

單個(gè)路由鉤子守衛(wèi)：

只有beforeEnter，在進(jìn)入前執(zhí)行，to參數(shù)就是當(dāng)前路由

 routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // next也是必須要寫(xiě)的

      }

    }

  ]

路由組件鉤子守衛(wèi)：

 beforeRouteEnter (to, from, next) {

    //內(nèi)部不能調(diào)用this  當(dāng)這個(gè)路由調(diào)用時(shí)，組件沒(méi)有被初始化

  },

  beforeRouteUpdate (to, from, next) {

    // 內(nèi)部可以訪(fǎng)問(wèn)組件實(shí)例 `this`

//路由內(nèi)部動(dòng)態(tài)參數(shù)改變了，組件被復(fù)用的時(shí)候調(diào)用（/list/1跳入/list/2,詳情組件復(fù)用的時(shí)候）

  },

  beforeRouteLeave (to, from, next) {

    // 可以訪(fǎng)問(wèn)組件實(shí)例 `this`  路由離開(kāi)這個(gè)組件的時(shí)候進(jìn)入

  }

到此，關(guān)于“分析Vue-Router路由與配置”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！