Vue-cli 3.x搭建專案還要做什麼？之二【Vue Router】

Ethan_Ceng發表於2019-03-20
Vue

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。這是來自官方的介紹。我們在這上面能做什麼呢，官方文件並不多。這篇舉個例子，拋磚磚。

Vue Router.

包含的功能：

  • 巢狀的路由/檢視表
  • 模組化的、基於元件的路由配置
  • 路由引數、查詢、萬用字元
  • 基於 Vue.js 過渡系統的檢視過渡效果
  • 細粒度的導航控制
  • 帶有自動啟用的 CSS class 的連結
  • HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
  • 自定義的滾動條行為

高階進階

  • 導航守衛
  • 路由元資訊
  • 過度動效
  • 資料獲取
  • 滾動行為
  • 路由懶載入

我們可以做什麼

  • 巢狀路由/檢視表，子路由 children 可以更好的組織頁面
  • 路由引數，跳轉，傳參，匹配
  • 過渡效果，滾動行為
  • 導航守衛，許可權限定
  • 路由懶載入，結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入
  • 等等

全域性前置守衛

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})
複製程式碼
  • 判斷使用者是否已經登入，控制進入許可權頁面。
  • 定義路由的時候可以配置 meta 欄位，個性化定製一些功能

相關文章