前端重點、要點來啦！必定要會全面使用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裏面的核心技術點，須要在項目中不斷的練習、具體到業務邏輯中使用才能更好的理解、滲透，其次多加記憶、鞏固纔可更加清晰。