vue-route 使用總結

route-vue使用總結（未完）

介紹

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度內建，讓建構單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 子產品化的、基于元件的路由配置
• 路由參數、查詢、通配符
• 基于 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連結
• HTML5 曆史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

檔案配置

index.js 執行個體

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router.js'  	// 引入的路由比對檔案

Vue.use(VueRouter)

const router = new VueRouter({		// 建立 router 執行個體
  mode: 'history',
  base: process.env.BASE_URL, 		// 當模式為 history 模式才能使用基路徑
  routes
})

export default router
           

route.js 執行個體

export default [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue'),
    children: [
    ]
  },
  // 首頁
  { path: '/home', name: 'home', component: () => import('../views/Home.vue') }, // 路由懶加載
  // 工具
  {
    path: '/tools',
    name: 'tools',
    component: () => import('../views/Tools.vue'),
    // 嵌套路由
    children: [
      { path: 'goodWeb', name: 'goodWeb', component: () => import('../views/ToolsPage/GoodWeb.vue') },
      { path: 'goodTool', component: () => import('../views/ToolsPage/goodTool.vue') },
      { path: 'fronted', component: () => import('../views/ToolsPage/fronted.vue') }
    ]
  }, // 路由懶加載
  { path: '*', name: 'home', component: () => import('../views/Home.vue') } // 路由懶加載
]
           

重要标簽了解

<router-link>

用來做路由導航用的，相當于

<a>

标簽，

to

屬性指定目标位址，

tag

屬性可以把

router-link

标簽渲染成其它标簽，

<router-link>

比起寫死的

<a href="..." target="_blank" rel="external nofollow" >

要好，理由如下

• 無論 history 模式 還是 hash 模式，兩者表現一緻
• 在 HTML5 history 模式下，

  router-link

  會守衛點選事件，讓浏覽器不再重新加載頁面
• 當在 history 模式下使用

  base

  選項之後， 所有的

  to

  屬性都不需要再寫 基準路徑 了，友善書寫路徑

v-solt

屬性先不做解釋，參考官方文檔

<router-link>

屬性

to

類型：

string | object

被點選時，會把 to 的值傳到

router.push()

中，是以這個值可以是

string | object

，也就是說在使用

js導航，push

内也是一樣得

// 範例
<!-- 字元串 -->
<router-link to="home">Home</router-link>

<!-- 使用 v-bind 的 JS 表達式, 就像綁定别的屬性一樣 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上，這是`object`模式 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由，傳參 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 帶查詢參數，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
           

replace

類型：

boolean

，預設值：

fasle

被點選時，會調用

router.place()

，而不是

router.push()

中，這裡就不會産生 history 記錄

append

類型：

boolean

，預設值：

false

如果添加了這個屬性，相當于在原來的路徑基礎上，繼續添加路徑

tag

類型：

string

，預設值：

a

把

router-link

标簽渲染成指定标簽，同樣可以兼具點選的功能

active-class

類型：

string

， 預設值：

router-link-active

預設值可以通過路由的構造選項

linkActiveClass

來全局配置

<router-view>

渲染路徑比對到視圖元件，同時

<router-view>

渲染的元件還可以内嵌自己的

<router-view>

，根據嵌套路徑，渲染嵌套元件。

因為它也是個元件，是以可以配合

<transition>

和

<keep-alive>

使用。如果兩個結合一起用，要確定在内層使用

<keep-alive>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>
           

<router-view>

屬性

name

類型：

string

， 預設值：

default

如果

<router-view>

設定了名稱，則會渲染對應的路由配置中

components

下的相應元件

Router 比對規則建構選項

這裡是配置路徑時的選項，在

router.js

頁面中使用

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, // 路由元資訊，可以傳遞資料

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

Router 比對規則建構選項

這裡是配置路由的模式，在

index.js

頁面中使用

const router = new VueRouter({
    mode: 'history',				// 路由模式
    base: process.env.BASE_URL,	// 基礎路徑
    routes,
    linkActiveClass: 'active-link',	// 更改預設的激活的 class
    linkExactActiveClass: 'exact-active-link', // 更改預設的精确激活的 class
    scrollBehavior (to, from, savedPostion) {  // 頁面跳轉後，頁面是否滾動
      if (savedPostion) {
        return savedPostion
      } else {
        return { x: 0, y: 0 }
      }
    },
    parseQuery (query) {},	// 自定義查詢字元串的 解析/反解析 函數。覆寫預設行為
    stringifyQuery (obj) {},
    fallback: 'boolean' // 當浏覽器不支援 history.pushState 控制路由是否應該回退到 hash 模式。預設值為 true。
})
           

• linkActiveClass 和 linkExactActiveClass 有什麼差別

列印 this.$router 你會發現什麼？

屬性

{
	app: {},				// 這裡包含的是 Vue 根執行個體
	fallback: false，		// 當浏覽器不支援 history.pushState 控制路由是否應該回退到 hash 模式。預設值為 true。
	mode: "history",		// 路由模式
	currentRoute: {			// 目前路由相關資訊
        fullPath: "/home"
        hash: ""
        matched: [{…}]
        meta: {}
        name: "home"
        params: {}
        path: "/home"
        query: {}
    }
}
           

守衛（俗稱鈎子函數，類似vue的生命周期）

router.beforeEach

相當于生命周期函數一樣，路由跳轉的時候會先經過這一層函數，可以處理一些資訊，比如使用者沒有登入，而目的頁跳轉的也不是login，那就直接讓他跳到login頁去

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

• to: Route

  : 即将要進入的目标 路由對象 ，這個是屬性

• from: Route

  : 目前導航正要離開的路由， 這個是屬性

• next: Function

  : 一定要調用該方法來 resolve 這個鈎子。執行效果依賴

  next

  方法的調用參數。

  • next()

    : 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀态就是 confirmed (确認的)。

  • next(false)

    : 中斷目前的導航。如果浏覽器的 URL 改變了 (可能是使用者手動或者浏覽器後退按鈕)，那麼 URL 位址會重置到

    from

    路由對應的位址。

  • next('/')

    或者

    next({ path: '/' })

    : 跳轉到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。你可以向

    next

    傳遞任意位置對象，且允許設定諸如

    replace: true

    、

    name: 'home'

    之類的選項以及任何用在

    router-link

    的

    to

    prop 或

    router.push

    中的選項。

  • next(error)

    : (2.4.0+) 如果傳入

    next

    的參數是一個

    Error

    執行個體，則導航會被終止且該錯誤會被傳遞給

    router.onError()

    注冊過的回調。

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
           

其它鈎子參考官方文檔