单页应用进阶：Vue Router 与 Pinia 状态管理

npm install vue-router@4

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// 1. 定义路由表：URL 路径和组件的映射关系
const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

// 2. 创建路由实例
const router = createRouter({
  // 使用 HTML5 模式的历史记录
  history: createWebHistory(),
  routes,
})

export default router

// src/main.js
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>
    <h1>我的 Vue 应用</h1>
    <nav>
      <!-- 使用 router-link 替代 a 标签 -->
      <router-link to="/">首页</router-link> | 
      <router-link to="/about">关于我们</router-link>
    </nav>

    <!-- 路由匹配到的组件将渲染在这里 -->
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

const routes = [
  // 动态字段以冒号开始
  { path: '/user/:id', component: UserView },
]

import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const route = useRoute()

onMounted(() => {
  // 通过动态路由参数读取当前用户 ID
  console.log('当前用户的 ID 是:', route.params.id) // 输出 123
})

import { useRouter } from 'vue-router'

const router = useRouter()

const handleLogin = async () => {
  await api.login() // 假设这是一个登录请求
  // 登录成功后，跳转到首页
  router.push('/')
  
  // 或者带参数跳转
  // router.push({ path: '/user/123' })
}

const routes = [
  {
    path: '/admin',
    component: AdminLayout, // 这是带有侧边栏的父组件
    children: [
      {
        path: 'dashboard', // 注意：子路由不要加开头的 '/'
        component: DashboardView // 渲染在 AdminLayout 的 <router-view> 中
      },
      {
        path: 'settings',
        component: SettingsView
      }
    ]
  }
]

<template>
  <div class="admin-layout">
    <Sidebar />
    <div class="main-content">
      <!-- Dashboard 或 Settings 会渲染在这里 -->
      <router-view></router-view> 
    </div>
  </div>
</template>

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');

  // 如果要去的是 admin 开头的页面，且没登录
  if (to.path.startsWith('/admin') && !isAuthenticated) {
    next('/login'); // 踢回登录页
  } else {
    next(); // 放行
  }
});

npm install pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia()) // 注册 Pinia
app.mount('#app')

// src/stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// defineStore 的第一个参数是这个 store 的唯一 id
export const useCounterStore = defineStore('counter', () => {
  // 1. State: 定义响应式数据
  const count = ref(0)

  // 2. Getters: 定义计算属性
  const doubleCount = computed(() => count.value * 2)

  // 3. Actions: 定义修改数据的方法
  function increment() {
    // 统一通过 action 修改状态
    count.value++
  }

  // 最后必须将这些暴露出去
  return { count, doubleCount, increment }
})

<template>
  <div>
    <p>当前计数: {{ counterStore.count }}</p>
    <p>双倍计数: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment()">点击增加</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

// 实例化 store
const counterStore = useCounterStore()
</script>

// ❌ 错误做法：直接解构会破坏响应式！数据变了页面也不会更新！
const { count, doubleCount } = useCounterStore()

import { storeToRefs } from 'pinia'

// ✅ 正确做法：使用 storeToRefs 包裹后再解构
const { count, doubleCount } = storeToRefs(useCounterStore())

// src/stores/cart.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCartStore = defineStore('cart', () => {
  const items = ref([]) // 购物车列表

  // Getter: 计算商品总数
  const totalItems = computed(() => {
    return items.value.reduce((total, item) => total + item.quantity, 0)
  })

  // Action: 添加到购物车
  function addToCart(product) {
    // 先查找购物车里是否已有同一个商品
    const existingItem = items.value.find(item => item.id === product.id)
    if (existingItem) {
      existingItem.quantity++
    } else {
      // 没有则追加一条新商品记录
      items.value.push({ ...product, quantity: 1 })
    }
  }

  return { items, totalItems, addToCart }
})

<!-- src/views/ProductList.vue -->
<template>
  <div>
    <h2>商品列表</h2>
    <div v-for="product in products" :key="product.id">
      <span>{{ product.name }} - ¥{{ product.price }}</span>
      <!-- 点击触发 Store 中的 addToCart 方法 -->
      <button @click="cartStore.addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()
const products = [
  { id: 1, name: 'Vue 3 高级编程', price: 99 },
  { id: 2, name: '机械键盘', price: 499 }
]
</script>

<!-- src/components/Header.vue -->
<template>
  <header>
    <router-link to="/">首页</router-link>
    <!-- 读取 Store 中的 totalItems，数据变化这里会自动更新 -->
    <router-link to="/cart">购物车 ({{ cartStore.totalItems }})</router-link>
  </header>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
const cartStore = useCartStore()
</script>