npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router'
// 引入頁面組件
import Home from '@/views/Home.vue'
import List from '@/views/List.vue'
import Detail from '@/views/Detail.vue'
// 定義路由規(guī)則
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home // 首頁
  },
  {
    path: '/list',
    name: 'List',
    component: List // 列表頁
  },
  {
    path: '/detail/:id', // 動態(tài)路由，:id 為參數(shù)占位符
    name: 'Detail',
    component: Detail // 詳情頁
  }
]
// 創(chuàng)建路由實例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用 HTML5 History 模式
  routes
})
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由配置
const app = createApp(App)
app.use(router) // 注冊路由
app.mount('#app')

<template>
  <div id="app">
    <!-- 路由出口，匹配到的頁面組件會渲染在這里 -->
    <router-view></router-view>
  </div>
</template>

<template>
  <div class="home">
    <h1>首頁</h1>
    <p>歡迎來到 Vue 3 多頁面應用！</p>
    <!-- 使用 router-link 進行聲明式導航 -->
    <router-link to="/list">跳轉到列表頁</router-link>
  </div>
</template>
<style scoped>
.home { padding: 20px; }
</style>

<template>
  <div class="list">
    <h1>列表頁</h1>
    <ul>
      <!-- 模擬列表數(shù)據 -->
      <li v-for="item in list" :key="item.id">
        <!-- 跳轉到詳情頁，傳遞 id 參數(shù) -->
        <router-link :to="`/detail/${item.id}`">{{ item.title }}</router-link>
      </li>
    </ul>
    <router-link to="/">返回首頁</router-link>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 模擬列表數(shù)據
const list = ref([
  { id: 1, title: '文章一：Vue Router 入門' },
  { id: 2, title: '文章二：Pinia 狀態(tài)管理' },
  { id: 3, title: '文章三：Vue 3 組合式 API' }
])
</script>
<style scoped>
.list { padding: 20px; }
li { margin: 10px 0; }
</style>

<template>
  <div class="detail">
    <h1>詳情頁</h1>
    <p>當前文章 ID：{{ articleId }}</p>
    <p>文章標題：{{ articleTitle }}</p>
    <!-- 編程式導航返回列表頁 -->
    <button @click="goBack">返回列表頁</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router' // 引入路由鉤子
const route = useRoute() // 獲取當前路由信息
const router = useRouter() // 獲取路由實例，用于編程式導航
const articleId = ref('')
const articleTitle = ref('')
// 模擬文章數(shù)據
const articles = {
  1: '文章一：Vue Router 入門',
  2: '文章二：Pinia 狀態(tài)管理',
  3: '文章三：Vue 3 組合式 API'
}
onMounted(() => {
  // 接收動態(tài)路由參數(shù) :id
  articleId.value = route.params.id
  articleTitle.value = articles[articleId.value] || '文章不存在'
})
// 編程式導航返回列表頁
const goBack = () => {
  router.push('/list')
}
</script>
<style scoped>
.detail { padding: 20px; }
</style>

npm install pinia
npm install pinia-plugin-persistedstate

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia' // 引入 Pinia
import piniaPersistedstate from 'pinia-plugin-persistedstate' // 引入持久化插件
const app = createApp(App)
const pinia = createPinia() // 創(chuàng)建 Pinia 實例
pinia.use(piniaPersistedstate) // 注冊持久化插件
app.use(router)
app.use(pinia) // 注冊 Pinia
app.mount('#app')

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 定義 User Store
export const useUserStore = defineStore('user', () => {
  // 1. State：響應式數(shù)據
  const token = ref('') // 登錄 Token
  const userInfo = ref({}) // 用戶信息

  // 2. Getters：計算屬性（可選，用于派生狀態(tài)）
  const isLoggedIn = computed(() => !!token.value) // 是否登錄

  // 3. Actions：修改狀態(tài)的方法
  // 登錄：保存 Token 和用戶信息
  const login = (newToken, newUserInfo) => {
    token.value = newToken
    userInfo.value = newUserInfo
  }

  // 登出：清空狀態(tài)
  const logout = () => {
    token.value = ''
    userInfo.value = {}
  }

  // 更新用戶信息
  const updateUserInfo = (newInfo) => {
    userInfo.value = { ...userInfo.value, ...newInfo }
  }

  // 返回 state、getters、actions
  return {
    token,
    userInfo,
    isLoggedIn,
    login,
    logout,
    updateUserInfo
  }
}, {
  // 4. 持久化配置
  persist: {
    key: 'user-store', // 存儲在 localStorage 中的 key
    storage: localStorage, // 存儲方式：localStorage 或 sessionStorage
    paths: ['token', 'userInfo'] // 指定需要持久化的 state，默認全部
  }
})

// src/router/index.js
const routes = [
  // ... 之前的路由
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue') // 路由懶加載
  }
]

<template>
  <div class="login">
    <h1>登錄頁</h1>
    <form @submit.prevent="handleLogin">
      <div>
        <label>用戶名：</label>
        <input v-model="username" placeholder="請輸入用戶名" required />
      </div>
      <div>
        <label>密碼：</label>
        <input v-model="password" type="password" placeholder="請輸入密碼" required />
      </div>
      <button type="submit">登錄</button>
    </form>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user' // 引入 User Store
const router = useRouter()
const userStore = useUserStore() // 獲取 Store 實例
const username = ref('')
const password = ref('')
// 模擬登錄
const handleLogin = () => {
  // 假設登錄成功，返回 Token 和用戶信息
  const mockToken = 'mock-token-123456'
  const mockUserInfo = {
    id: 1,
    username: username.value,
    avatar: 'https://via.placeholder.com/50'
  }
  // 調用 Store 的 login 方法
  userStore.login(mockToken, mockUserInfo)
  // 登錄成功后跳轉到首頁
  router.push('/')
}
</script>
<style scoped>
.login { padding: 20px; max-width: 300px; margin: 0 auto; }
div { margin: 10px 0; }
input { width: 100%; padding: 8px; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #42b883; color: white; border: none; cursor: pointer; }
</style>

<template>
  <div class="home">
    <h1>首頁</h1>
    <!-- 根據登錄狀態(tài)顯示不同內容 -->
    <div v-if="userStore.isLoggedIn">
      <p>歡迎你，{{ userStore.userInfo.username }}！</p>
      <img :src="userStore.userInfo.avatar" alt="頭像" style="width: 50px; height: 50px; border-radius: 50%;" />
      <button @click="handleLogout">登出</button>
    </div>
    <div v-else>
      <p>你還未登錄，請先登錄。</p>
      <router-link to="/login">去登錄</router-link>
    </div>
    <router-link to="/list">跳轉到列表頁</router-link>
  </div>
</template>
<script setup>
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
// 登出
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>
<style scoped>
.home { padding: 20px; }
</style>