Vue 3 路由使用完全指南(整体流程)

// src/router/index.js
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
  }
]
const router = createRouter({
  history: createWebHistory(), // 不带 # 的 URL
  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')

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 路由名称跳转（推荐）
router.push({ name: 'about' })
// 路径跳转
router.push('/about')
// 返回上一页
router.back()
router.go(-1)
</script>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 获取路径参数 /user/:id
console.log(route.params.id)
// 获取查询参数 ?keyword=hello
console.log(route.query.keyword)
</script>

<template>
  <router-link to="/about">关于我们</router-link>
  <router-link :to="{ name: 'home' }">首页</router-link>
</template>

<!-- App.vue 根组件 -->
<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <!-- 路由页面在此处显示 -->
    <router-view />
  </div>
</template>

src/
├── main.js            # 注册路由
├── App.vue            # 根组件，包含 <router-view />
├── router/
│   └── index.js       # 路由配置
└── views/
    ├── Home.vue       # 首页
    └── About.vue      # 关于页