Vue Router 之 Named Routes

實務上我們不希望 <router-link/> 直接綁定一個 Route，這樣將來 route 改變時，會所有 <router-link/> 都要改，而希望綁定到一個 Name，這樣將來 Route 改變時，只要修改 route.js 即可，而不用每個 HTML Template 都修改。

Version

Vue 2.6.10

Vue-router 3.0.3

Vue CLI 3.8.4

Normal Route

Product
/products/1
T-Shirts

route.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/products/:id',
      name: 'products',
      component: () => import(/* webpackChunkName: "products" */ './views/Products.vue'),
    },
  ]
});

19 行

{
  path: '/products/:id',
  name: 'products',
  component: () => import(/* webpackChunkName: "products" */ './views/Products.vue'),
},

當 route 為 /products/:id 時，使用 Products component。

App.vue

第 6 行

<router-link to="/products/1">Product</router-link>

<router-link/> 的 to 直接綁定 /products ，若將來 route 修改，則所有 HTML template 的 <router-link/> 都要跟著改。

Named Route

route.js

{
  path: '/products/:id',
  name: 'products',
  component: () => import(/* webpackChunkName: "products" */ './views/Products.vue'),
},

Route object 有 name property，其實就是用來使用 named route。

App.vue

第 6 行

<router-link :to="{ name:'products', params: { id: 1 }}">Product</router-link>

<router-link/> 的 to 改用 attribute binding 到 route object，其 name 就是在 route.js 設定的 name 。

若要綁定到 param，則加上 params property。

Router.push() by Name

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <a href="#" @click="onProductClick">Product</a>
    </div>
    <router-view/>
  </div>
</template>

<script>
let onProductClick = function() {
  this.$router.push({ name: 'products', params: { id: '1' } });
};

export default {
  name: 'app',
  methods: {
    onProductClick,
  }
}
</script>

除了使用 <router-link> tag 外，也可以使用 JavaScript。

第 6 行

<a href="#" @click="onProductClick">Product</a>

改用 HTML 的 <a> ，為了有底線，所以要保留 href="#" ，改用 onProductClick() 跳轉頁面。

13 行

let onProductClick = function() {
  this.$router.push({ name: 'products', params: { id: '1' } });
};

將 object 傳入 this.$router.push() ，其中 name property 為 route 名稱， params property 為 要傳入資料。

Router.push() by Path

let onProductClick = function() {
  this.$router.push({ path: 'products/1' });
};

也可以改用 path property，此時使用 string 即可。

Arrow Function

import router from './router';

let onProductClick = () => router.push({ path: 'products/1' });

若你很討厭透過 this context 存取 $route ，導致得使用 function expression 的話，也可以將 router import 進來，如此就可大膽使用 arrow function。

Conclusion

• Named route 讓 <router-link/> 沒綁死特定 route，將來更容易維護
• 除了使用 <router-link/> 外，也可使用 JavaScript 的 router.push()
• 若你喜歡 arrow function，也可將 router import 進來，如此就不需依賴 this context 存取 $router