Vue-Router路由怎么配置

本篇內(nèi)容介紹了“Vue-Router路由怎么配置”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

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

cnpm i vue-router -S

yarn add vue-router -S

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

        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為路徑對應(yīng)的路由組件

        {path,component}

    ]

    new Router({

        routes

    })

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

 new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: { App }

    })

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

7. 使用router-link來創(chuàng)建切換的工具，會(huì)渲染成a標(biāo)簽，添加to屬性來設(shè)置要更改的path信息，且會(huì)根據(jù)當(dāng)前路由的變化為a標(biāo)簽添加對應(yīng)的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;

}

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

在創(chuàng)建路由表的時(shí)候，可以為每一個(gè)路由對象創(chuàng)建children屬性，值為數(shù)組，在這個(gè)里面又可以配置一些路由對象來使用多級(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來指定（指定在父級(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í)候，不利于快速定位路由匹配的組件。所以，可以通過命名路由的方式去實(shí)現(xiàn)以上代碼。

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

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

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

const routes = [

homeRouter

 ]

//homeRouter.js文件里面

export defult {

  Name:’homeRouter’,

  Path:’/home’

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

}

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

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

通過 router.beforeEach 或者router.afterEach注冊一個(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)對象

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

Next: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子。執(zhí)行效果依賴 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也是必須要寫的

      }

    }

  ]

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

 beforeRouteEnter (to, from, next) {

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

  },

  beforeRouteUpdate (to, from, next) {

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

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

  },

  beforeRouteLeave (to, from, next) {

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

  }

“Vue-Router路由怎么配置”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！