建立 router

• 安裝 vue-router npm install vue-router --save

• 建立 routes.js ，用來設定 router path 跟相對應的 component

  import { createRouter, createWebHashHistory } from "vue-router";
  import HomePage from "./views/HomePage.vue"; // 引入 component
  import CreatePage from "./views/CreatePage.vue";
  
  // 設定路由 path、對應的 component
  const router = createRouter({
      history: createWebHashHistory(),
      routes: [
          { path: '/', component: HomePage },
          { path: '/create?', component: CreatePage }
      ]
  
  })
  
  export default router
  

• 在 main.js 引用 router: app.use(router)

  import { createApp } from 'vue'
  import App from './App.vue';
  import router from './routes'
  
  const app = createApp(App);
  
  app.use(router);
  
  app.mount('#app')
  

• 用 <router-view></router-view> 就可以選染出 router 設定好的 component

  <template>
    <navbar></navbar>
    <router-view></router-view>
  </template>
  

好用的語法

<router-link to="/"></router-link>
建立路由連結，類似 <a href="">

router-view
可以將連結(url) 對應的 component 渲染

Router 設定

• 若要在 path 傳遞參數可用 :
  假設有一個編輯頁面 id 不同，可以在 path 寫 :id 帶入 id

import PageEdit from "./views/PageEdit.vue";

// 設定路由 path、對應的 component
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: HomePage },
        { path: '/create?', component: CreatePage },
        { path: '/:id/edit', component: PageEdit }
    ]

})

在 component 裡再用 $route.params.id 取得 id

<template>
  <h4>Edit page {{ $route.params.id}}</h4>
</template>

• 若要將 id 作為 props ，可加上 props: true

import PageEdit from "./views/PageEdit.vue";

// 設定路由 path、對應的 component
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: HomePage },
        { path: '/create?', component: CreatePage },
        { path: '/:id/edit', component: PageEdit, props: true } // 後面多加上一個 props: true 就可以被當作 prop 來使用
    ]

})

• 用 Children 實現在 router 裡面再一個 router (Nested Routes)
  假設 page 有一個編輯頁面、一個新增頁面，想要放在 pages 的 path 裡面，可用 children 寫在 pages 的 path 裡面

  • 編輯頁面的 url : http://localhost:8080/#/pages/1/edit
  • 新增頁面的 url : http://localhost:8080/#/create

  const router = createRouter({
      history: createWebHashHistory(),
      routes: [
          { path: '/', component: HomePage , props: true },
          {
              path: '/pages',
              component: Pages,
              children: [
                  { path: 'create', component: CreatePage },
                  { path: ':index/edit', component: PageEdit, props: true }
              ]
          },
  
      ]
  
  })