npm install vue-router

import { createRouter, createWebHistory } 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 },
    {
        path: '/user/:id',
        name: 'User',
        component: User,
        beforeEnter: (to, from) => {
            const isAuth = localStorage.getItem('token')
            if (!isAuth) return '/login'
        }
    },
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]

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

export default router

// 声明式
<router-link to="/about">关于我们</router-link>
<router-link :to="{ name: 'User', params: { id: 123 } }">用户</router-link>

// 编程式
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about')
router.push({ name: 'User', params: { id: 123 } })
router.replace('/login')
router.back()

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({
        count: 0,
        name: '计数器'
    }),
    getters: {
        doubleCount: (state) => state.count * 2
    },
    actions: {
        increment() {
            this.count++
        },
        async fetchCount() {
            const res = await fetch('/api/count')
            this.count = await res.json()
        }
    }
})

<script setup>
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
store.count++
store.increment()
</script>

<template>
    <p>计数: {{ store.count }}</p>
    <p>两倍: {{ store.doubleCount }}</p>
    <button @click="store.increment">+1</button>
</template>