DAY24 | 跟 Vue.js 認識的30天 - Vue 套餐之路由器 Vue Router (上)

發表於 更新於 分類於 ，

隔了超久，還是要來補完這一系列的筆記， Router (以下簡稱路由)這一部分感覺就重點很多，大概會分 2 - 3 篇來記錄吧！

安裝

Vue Router 提供幾種使用路由的方法：

  • 使用 CDN (免下載)

    1
    2
    3
    4
    <!-- 開發版 -->
    <!--先載入 Vue 在載入 Vue Router-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  • 使用 NPM

    1
    $ npm install vue-router

    記得使用 ↓↓↓ 載入

    1
    2
    3
    4
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

  • 使用 Vue CLI

    1
    $ vue add router

注意：全篇皆以 CDN 安裝為例！

如何開始

  • HTML 中

    使用 <router-link to="路由路徑">顯示在頁面</router-link> 來設定連結，並透過 <router-view></router-view> 來將該路由中的模組內容顯示在頁面上。

  • JS 中

    先創建每個路由所需的模組，再將該模組寫入路由器中，並為其製造一個路徑(path)，最後創建一個 VueRouter 實例，該實例中的屬性 routes 的即為剛剛寫好的路由器。

範例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div id="vm">
  <p>
    <!-- 使用 router-link 標籤 -->
    <!-- 透過屬性 `to` 属性指定欲連接的路由. -->
    <!-- <router-link> 會被渲染成 `<a>` -->
    <router-link to="/home">Go to HOME</router-link>
    <router-link to="/about">Go to ABOUT</router-link>
  </p>
  <!-- router-view 代表路由渲染位置 -->
  <!-- 路由匹配到的模組渲染位置 -->
  <router-view></router-view>
</div>

<!--載入Vue 及 Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!-- Vue 及 Vue Router 實例 -->
<script>

//1.創建路由(創建模組及命名)
const HOME = {
  template: `<div>HOME</div>`,
  created() {
    console.log('HOME', this.$route);
  }
};
const ABOUT = {
  template: `<div>ABOUT</div>`,
  created() {
    console.log('ABOUT', this.$route);
  }
};

//2.定義路由
//每個路由皆配置一個路徑及對應的組件
//path 為網址中對應的路徑名
const routes = [
  { path: "/home", component: HOME },
  { path: "/about", component: ABOUT }
];

//3. 創建 router 實例
const router = new VueRouter({
  // routes: routes 縮寫
  routes
})

//4.創建 Vue 實例並將 router實例代入
const app = new Vue({
  router,
  el:"#vm",
  created() {
    console.log('vm', this.$route);
  }
})
</script>

在上面例子中，會看到 this.$route ，透過查詢 $route 屬性，我們可以得到許多關於路由的資訊，如下：

  • 剛載入畫面時

  • 切換到 HOME

  • 切換到 ABOUT

實現動態路由

透過在路由器中的 path 屬性使用**動態路徑參數(dynamic segment)**以實現用同一個模組展現多個頁面，如產品頁面皆使用同一模組，但內容會依產品不同而做修改，達到每個產品皆有屬於自己的頁面。

響應路由參數變化

必須注意到當使用相同模組的路由發生變化時，這個模組實例將會被復用，也因此模組的生命週期鉤子並不會被重新調用。

當路由發生變化時，要如何改變模組裡的內容呢？
如同上面所說在路由發生變化時，模組是被復用，所以我們可以透過 computed 或是 watch 來監控著路由值。

可以參考之前 computed 跟 watch 的筆記。

實際操作如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div id="vm">
  <p>
    <!-- 使用 router-link 標籤 -->
    <!-- 透過屬性 `to` 属性指定欲連接的路由. -->
    <!-- <router-link> 會被渲染成 `<a>` -->
    <router-link to="/user/Celeste">Go to Celeste</router-link>
    <router-link to="/user/Michelle">Go to Michelle</router-link>
  </p>
  <!-- router-view 代表路由渲染位置 -->
  <!-- 路由匹配到的模組渲染位置 -->
  <router-view></router-view>
</div>

<!--載入Vue 及 Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<!-- Vue 及 Vue Router 實例 -->
<script>

//1.創建路由(創建模組及命名)
const USER = {
  template: `<div>I\'m {{ username }}</div>`,
  //因為這裡路由變化後要執行的並不是需要做同步非同步，所以就用computed 來監控
  computed:{
    username(){
      // 監視著 $route ，當 $route 變換時，值會有所變化
      return this.$route.params.username
    }
  },
  created() {
    // 在切換 Celeste 跟 Michelle 頁面的時候，created() 只出現一次
    // 代表頁面並沒有被重新載入，而是將頁面裡不同的內容更改掉而已
    console.log("USER", this.$route.params);
  }
};

//2.定義路由
//每個路由皆配置一個路徑及對應的組件
//path 為網址中對應的路徑名
// :username 代表動態路由參數
const routes = [
  { path: "/user/:username", component: USER }
];

//3. 創建 router 實例
const router = new VueRouter({
  // routes: routes 縮寫
  routes
})

//4.創建 Vue 實例並將 router實例代入
const app = new Vue({
  router,
  el:"#vm"
})
</script>

使用通配符 (*)來捕獲特殊路徑

使用通配符(*)的目的在於匹配 404 頁面，所以必須注意含有通配符的路徑必須放到最後。

透過使用通配符(*)的話，在 this.$route.params.pathMatch 裡可得到匹配的內容。

1
2
3
4
5
6
7
8
9
10
11
12
const NOTFOUND = {
  template: `<p>404</p>`,
  mounted(){
    console.log(this.$route.params.pathMatch) // '/aa'
  }
}

const routes = [{
  path: '*',
  component: NOTFOUND
  }
]

除了上述作用外，還可以透過通配符(*)作特定路由的匹配，例如 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const ADMIN = {
  template: `<p>{{ admin }}</p>`,
  computed:{
    admin(){
      return this.$route.params.pathMatch
    }
  }
}

const routes = [{
  path: '/user-*',
  component: ADMIN
  }
]

只要路徑符合前面是 user- ，那就是套用該模組，並且利用 this.$route.params.pathMatch 可得到 user- 後面的值。

See the Pen DAY24 | 跟 Vue.js 認識的30天 - Vue 套餐之路由器 Vue Router (上) by Celeste6666 (@celeste6666) on CodePen.

參考資料

Vue Route - 安装

Vue Route - 起步

Vue Route - 动态路由匹配