分析Vue-Router路由與配置

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

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

一．項目引入路由并配置：

1.在vue項目中，通過cnpm或者yarn的方式進行vue-router的安裝

cnpm i vue-router -S

yarn add vue-router -S

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

        import Vue from 'vue'

        import Router from 'vue-router'

        Vue.use(Router)

3. 創建router路由器

    new Router({

      routes:[

        {path:"",component:}

      ]

    })

4. 創建路由表并配置在路由器中

    var routes = [

//path為路徑，component為路徑對應的路由組件

        {path,component}

    ]

    new Router({

        routes

    })

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

 new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: { App }

    })

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

7. 使用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;

}

項目中多級路由配置：

在創建路由表的時候，可以為每一個路由對象創建children屬性，值為數組，在這個里面又可以配置一些路由對象來使用多級路由，注意：只在一級路由的path前加 '/ '

const routes = [

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

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

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

    {path:'outer',component:Outer}

  ]},

]

二級路由組件的切換位置依然由router-view來指定（指定在父級路由組件的模板中）

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

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

<router-view></router-view>

      但是這樣發現當路由路徑多級的時候，不利于快速定位路由匹配的組件。所以，可以通過命名路由的方式去實現以上代碼。

我們可以給路由對象配置name屬性，當我們在跳轉的時候直接寫name:inner就會快速的找到此name屬性所對應的路由，不需要寫大量的urlpath路徑了。如下所示：

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

這樣的話，我們就可以方便的根據路由的不同進行組件之間的映射。但是，做大型項目開發的時候，我們也會發現很多的路由寫在routes這個里面，會讓router這個文件變得很大不利于維護管理。除此之外，如果通過這樣的方式還會導致當用戶打開首頁的話，因為webpack打包的時候，加載內容異常的多導致打開速度很慢。所以我們需要對我們的路由采取懶加載的方式進行引入：

const routes = [

homeRouter

 ]

//homeRouter.js文件里面

export defult {

  Name:’homeRouter’,

  Path:’/home’

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

}

Vue-Router的路由守衛：

在項目開發中，我們經常會在路由跳轉前后做一些操作。例如我們可以通過利用vue-router里面提供的路由守衛結合axios攔截器實現項目的登錄攔截等操作。Vue-router里面提供的路由守衛可以分為三大類，分別是全局路由守衛、單個的路由鉤子的路由守衛、路由組件內部的路由守衛。好，我們依次來看：

通過 router.beforeEach 或者router.afterEach注冊一個全局守衛：

1-1

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

    //會在任意路由跳轉前執行，next一定要記著執行，不然路由不能跳轉了

  next()

})

守衛方法需要接受三個參數：to、from、next

to:即將要進入的目標對象

From:當前導航正要離開的路由

Next: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

1-2

//會在任意路由跳轉后執行  

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

})

單個路由鉤子守衛：

只有beforeEnter，在進入前執行，to參數就是當前路由

 routes: [

    {

      path: '/foo',

      component: Foo,

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

        // next也是必須要寫的

      }

    }

  ]

路由組件鉤子守衛：

 beforeRouteEnter (to, from, next) {

    //內部不能調用this  當這個路由調用時，組件沒有被初始化

  },

  beforeRouteUpdate (to, from, next) {

    // 內部可以訪問組件實例 `this`

//路由內部動態參數改變了，組件被復用的時候調用（/list/1跳入/list/2,詳情組件復用的時候）

  },

  beforeRouteLeave (to, from, next) {

    // 可以訪問組件實例 `this`  路由離開這個組件的時候進入

  }

到此，關于“分析Vue-Router路由與配置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！