vuejs系列五-vue-router的使用（上）

前言

一個web應用路由定義的是否合理是判斷這個應用是否合格的基礎條件之一，在spa開發模式以前，前端開發基本不用考慮路由的定義這塊基本都是後臺在完成，但隨着spa的推廣先後端分離的大趨勢下，前端路由定義的任務便落在的咱們前端開發者身上。本節咱們就來聊聊vue中vue-router的路由定義與配置。

vue-router起到的做用

• 路由匹配：組件 (components) 映射到路由 (routes)，而後告訴 Vue Router 在哪裏渲染它們。
• 動態路由：以多個路由映射到同一個組件，即把某種模式匹配到的全部路由，全都映射到同個組件。
• 路由攔截（導航守衛）：登陸認證以及權限認證都須要導航守衛來控制。
• 前端控制路由

vue-router使用方式

引入

• 將vue-router引入
• 定義路由組件

import Foo from './Foo.vue'
import Test from './Test.vue'
複製代碼

• 配置路由和組件到映射

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Test }
]
複製代碼

• 將路由配置文件放到VueRouter對象中

let router =  new VueRouter({
  routes,
  //默認爲hash模式
  mode:'history'
})
export default router
複製代碼

• 將路由實例掛載到vue對象上

const router = new VueRouter({
  routes // (縮寫) 至關於 routes: routes
})
const app = new Vue({
  router
}).$mount('#app')

複製代碼

主要api詳解

• 配置路由

interface RouteConfig = {
  path: string,//路徑
  component?: Component,//路徑對應加載對組件
  name?: string, // 命名路由
  components?: { [name: string]: Component }, // 命名視圖組件
  redirect?: string | Location | Function,//重訂向對路由
  props?: boolean | Object | Function,
  alias?: string | Array<string>,//別名
  children?: Array<RouteConfig>, // 嵌套路由的自路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,//路由守衛
  meta?: any,//其餘項 掛載在this.$route上

  // 2.6.0+
  caseSensitive?: boolean, // 匹配規則是否大小寫敏感？(默認值：false)
  pathToRegexpOptions?: Object // 編譯正則的選項
}

複製代碼

• 路由模式：改變視圖的同時不會向後端發出請求

  mode:'history'//默認爲hash模式
  複製代碼

  hash模式是帶有#的路由模式，通常咱們生產環境部署都不會採用他。

  • 優勢：當沒有匹配的路由時不會404，即服務端對hash模式影響不大
  • 缺點：帶有#號，不符合正常路由規範

  history模式是你實際配置對路由，無#號

  • 優勢1：設置的新 URL 能夠是與當前 URL 同源的任意 URL；而 hash 只可修改 # 後面的部分，所以只能設置與當前 URL 同文檔的 URL
  • 優勢2: 實際設置路由，無#號。
  • 優勢3: 添加記錄（與hash路由相比，不管變化路由是否相同都會添加到記錄棧中）
  • 優勢4: 添加任意類型到記錄（hash只能添加短字符串）

  路由跳轉

• 經常使用api以下：

  router.push
    router.replace
    router.go
    router.back
    router.forward
  複製代碼

• 路由導航守衛 vue-router中經常使用到路由導航守衛有beforeEach和afterEach

  beforeEach

  • 路由前置導航守衛，回調函數有三個參數from to next在調用next前 路由不會被解析。

  const router = new VueRouter({ ... })
  router.beforeEach((to, from, next) => {
    // ...
    next()
  })
  複製代碼

  afterEach路由後置鉤子

• 過渡動效：transition組件,使用方式以下

  <transition>
    <router-view></router-view>
  </transition>
  複製代碼

• 滾動:vue-router有個能夠控制路由跳轉到新頁面是的滾動位置的屬性

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
  }
})
複製代碼

注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。詳細請查看官方文檔

總結

路由配置如今已是前端工程中必不可少的配置，合理的路由配置能大大提高用戶體驗度，而且還能改善項目結構。