【Vue2】Vue Router 介紹

本篇將整理 Vue2 的 Vue Router 的使用方式，資料都是參考官方網站。

安裝

Vue2 使用的是 V3 的版本，所以安裝時記得要加上 @3。

npm install vue-router@3

基本使用

首先先建立 router 的結構，開一個 router/index.js 的檔案，然後在這邊先把 Router 套件用 Vue.use() 的方式，掛載在 Vue 上，再來使用 new Router() 把 router 結構丟進去。

import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

之後把 router 引入全域，在 main.js 引入。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

在初始頁 App.vue 加上 <router-view/> component 就可以把你的路徑元件插入在你想要的地方了。

<template>
  <div id='app'>
    <h1>Hello World!</h1>
    <router-view />
  </div>
</template>

要切換路徑就使用 <router-link> 來換頁。

<template>
  <router-link to='/about'>About</router-link>
</template>

深入了解

new Router() 常用參數

在 new Router() 裡面除了可以加 routes 陣列之外，還有幾個參數可以設定

• mode (string)：設定路徑模式，預設是 Hash，通常會設定為 History`。
• base (string)：設定 base url，如果 app 部署在子目錄的話，可以重設根路徑。
• scrollBehavior (function)：當使用者換頁時會呼叫這個函式，控制頁面要滾動到哪裡，回傳一個 {x,y} position 或是一個 element。
• linkActiveClass (string)：設定路由 active 的 class name（預設是 router-link-active）。
• falback (boolean)：如果設定為 truexxw，當沒有符合的路徑時，會回到最近的路由上。
• children (array)：可以設定巢狀子路由。
• meta (object)：設定路由的基本資料，例如：title, id...

延遲載入 component

使用函式回傳 import component 來延遲載入。

const About = () => import('@/views/About');

export default new Router({
  routes: [
    {
      path: '/about',
      component: About;
    }
  ]
})

有時候我們希望同時載入子路徑時，就要使用特別的 comment syntax 來給他們相同的 webpackChunkName 名稱。

const About = () => import(/* webpackChunkName: "group-main" */ '@/views/About');
const Product = () => import(/* webpackChunkName: "group-main" */ '@/views/Product');

export default new Router({
  routes: [
    {
      path: '/about',
      component: About;
    },
    {
      path: '/product',
      component: Product;
    }
  ]
})

是不是超怪，我第一次看到的時候覺得超詭異。要特別注意的 webpack 的版本要 2.4 以上。

幫路徑加 name

可以為每個路由都加上 name 參數，用意是增加一個指定路由的方式。

const About = () => import('@/views/About');

export default new Router({
  routes: [
    {
      path: '/about',
      name: 'my-about',
      component: About;
    }
  ]
})

可以在 <router-link> 的地方用 {name: 'my-about'} 的方式換頁。

Home.vue

<template>
  <router-link :to="{name: 'my-about'}">About</router-link>
</template>

router-view 參數

在 <router-view> 也可以加入 name 參數，配合前面提到的路由參數，就可以指定要插入的位置。

<template>
  <div id='app'>
    <router-view name='header' />
    <h1>Hello World!</h1>
    <p>...</p>
    <router-view name='footer' />
  </div>
</template>

export default new Router({
  routes: [
    {
      path: "/",
      name: 'header'
      component: Header,
    },
    {
      path: "/about",
      name: 'footer',
      component: Footer,
    },
  ],
});