Vue-Router 是 Vue 官方使用的路由管理器,在建置單頁面應用程式時可以很輕鬆方便的管理各頁面組件的 render,這篇主要筆記一些基本的用法方便查詢。

 

基本概念

Vue-Router 使用到的核心概念是建立在 router-link + router-view 的元素上,將 link 指向的 component render 在 view 上,參照官方範例基本的配置如下

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link 連結的頁面會加上 .router-link-active 的 class 樣式,方便在連結上做出當頁 highlight 效果。

 

使用及設定

由於我接觸的專案大多使用模組化的架構,所以筆記內容會以這方面的記錄為主,在模組化的架構中,使用 vue-router 需要先引入 vue 及 router 核心,並且讓專案頁面使用 router 來連結架構

//引入 vue
import Vue from 'vue';

//引入 vue-router
import Router from 'vue-router';

//使用 vue-router 來架構頁面
Vue.use(Router);

引入核心後需要建立一個 router 物件來設定專案的連結架構,routes 的值需要是一個 array,主要用來分配路由導向的相關參數,基本使用必須指定 path (連結路徑) 及 component (元件)


//建立 component 或可用 import 引入
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

//建立 vue-router 物件
const router = new VueRouter({
  routes: [
    {
	  path: '/foo',
	  component: Foo
	},
	{
	  path: '/bar',
	  component: Bar
	}
  ]
});

最後則是在建立 Vue 物件時將 router 加入

const app = new Vue({
  el: '#app'
  data,
  router,
  methods
});

 

router 參數

vue-router 中有許多參數,分別筆記一下各自的功能

  • path:router-link 連結的對應路徑,設定以 “/” 開頭的路徑會被當成根目錄。
  • name:router 的名稱。
  • redirect:重新導向的路徑,會取代 path。
  • component:render 到 router-view 的元件。
  • children:目前路由的子路由,設置在 children 中的 component 會套用父路由的框架。
const routes = [
  {
    path: '/',
	name: 'index',
	redirect: '',
	component: Index,
	children: [
	  {
	    path: 'about',
		name: 'about,
		component: About
	  }
	]
  }
]

 

lazyload

當專案比較複雜時,內容會使用到許多的 component,此時如果使用一般的 router 引入元件勢必要引入一大堆東西,對單頁應用會有效能上的問題,可以使用 lazyload 的方式來加載 component,這樣就可以在路由發出請求連結頁面時再去 loading 對應的 component,降低效能的使用。

{
  path: '/about',
  component: resolve => require(['@/about'], resolve),
}

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料