好程序員Web前端乾貨詳解Vue-Router路由與配置

好程序員Web前端乾貨詳解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)

1. 建立router路由器
   new Router({
   routes:[

   {path:"",component:}

   ]
   })

2. 建立路由表並配置在路由器中
   var routes = [

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

{path,component}
]
new Router({
    routes
})

1. 在根實例裏注入router,目的是爲了讓全部的組件裏都能經過this.$router、this.$route來使用路由的相關功能api
   new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
   })
2. 利用router-view來指定路由切換的位置
3. 使用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;

}

二．項目中多級路由配置：
1.在建立路由表的時候，能夠爲每個路由對象建立children屬性，值爲數組，在這個裏面又能夠配置一些路由對象來使用多級路由，注意：只在一級路由的path前加 '/ '
const routes = [
{path:'/home,component:Home},
{path:'/list',component:List,children:[

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

]},
]
2.二級路由組件的切換位置依然由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裏面提供的路由守衛能夠分爲三大類，分別是全局路由守衛、單個的路由鉤子的路由守衛、路由組件內部的路由守衛。好，咱們依次來看：
1.經過 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)=>{
})

2.單個路由鉤子守衛：
只有beforeEnter，在進入前執行，to參數就是當前路由
routes: [

{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // next也是必需要寫的
  }
}

]

3.路由組件鉤子守衛：
beforeRouteEnter (to, from, next) {

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

},
beforeRouteUpdate (to, from, next) {

// 內部能夠訪問組件實例 `this`

//路由內部動態參數改變了，組件被複用的時候調用（/list/1跳入/list/2,詳情組件複用的時候）
},
beforeRouteLeave (to, from, next) {

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

}以上就是Vue-Router裏面的核心技術點，須要在項目中不斷的練習、具體到業務邏輯中使用才能更好的理解、滲透，其次多加記憶、鞏固纔可更加清晰。