動態路由

有時後我們會由不同 user 去渲染不同畫面，但不可能為每個 user 都做一個畫面，這時候就可以使用共同模板依不同參數去動態渲染

eg.
index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'

export default createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about',name: 'about', component: About },
    { path: '/users/:id', name: 'user', component: User }, // 動態參數
  ],
})

App.vue

<template>
  <h1>Hello App!</h1>
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
    <RouterLink to="/users/johnny">johnny</RouterLink>
    <RouterLink to="/users/jolyne">jolyne</RouterLink>
  </nav>
  <main><RouterView /></main>
</template>

<style scoped>
  nav{
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
</style>

Home.vue

<template>
  <section>
    <h2>Home</h2>
    <p>點上面的連結切到動態使用者頁</p>
  </section>
</template>

User.vue

<template>
  <section>
    <h2>User {{ $route.params.id }}</h2>
  </section>
</template>

依不同 user 顯示畫面