Vue Router 設定

延續上次的設定檔

// src/router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

使用陣列來建立我們的 routes，每一個 route 都有幾項特別項目需要注意:

• Path : 路由的 URL 路徑
• Name : link 到此路由的名稱
• Component : 當路由被呼叫時，要載入的元件

在 createRouter 中，除了傳入 routes 外還可以傳入 createWebHistory選擇要使用 hash 或是 history mode。

接著就可以在main.js中加入 router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---加這 加這

createApp(App).use(router).mount('#app')

具名路由 (Named Routes)

指定 name 當作路由的參考

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
}

傳入一個物件給 router-link 的 to 屬性

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

對應的 URL 為 /user/123

轉址 (redirect)

將/a 轉頁到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

也可以透過 name

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

別名 (alias)

和轉址差異在於，轉址是 URL 會被替換；而別名像是替路由再取另個名字，但網址列看到的 URL 不會被替換

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

　造訪 /b 時，URL 保持 /b，但是匹配到 /a 的內容

參考

Vue Router: A Tutorial for Vue 3

下篇預告

• Vuex

每日一句:
使用者訪談，原來痛點在這裡