我给你最完整、最标准、可直接复制运行的 Vue3 路由全套示例，包含： 路由配置
页面跳转
路由传参
动态路由
嵌套路由（子路由）
404 页面
路由守卫（登录拦截）
组合式 API 完整用法

一、项目结构（照着建）

src/
├── router/
│   └── index.js       # 路由配置
├── views/             # 页面组件
│   ├── Home.vue
│   ├── About.vue
│   ├── User.vue
│   ├── Login.vue
│   ├── NotFound.vue
│   └── Dashboard/     # 嵌套路由文件夹
│       ├── Dashboard.vue
│       ├── Profile.vue
│       └── Order.vue
├── App.vue
└── main.js

二、安装路由

npm install vue-router@4

三、完整代码（直接复制）

1. 路由配置：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

// 导入页面
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import NotFound from '../views/NotFound.vue'

// 路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true } // 需要登录才能访问
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') // 懒加载
  },
  {
    path: '/user/:id', // 动态路由
    name: 'User',
    component: () => import('../views/User.vue')
  },
  {
    path: '/login',
    component: Login
  },
  // 嵌套路由示例
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: 'profile', component: () => import('../views/Dashboard/Profile.vue') },
      { path: 'order', component: () => import('../views/Dashboard/Order.vue') }
    ]
  },
  // 404 页面
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
]

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

// 路由守卫（登录验证）
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') // 模拟登录状态

  if (to.meta.requiresAuth && !isLogin) {
    next('/login') // 未登录，跳转到登录页
  } else {
    next() // 放行
  }
})

export default router

2. 挂载路由：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由

createApp(App).use(router).mount('#app')

3. 根组件：App.vue

四、页面组件代码

Home.vue（首页）

ℹ️ About.vue（关于页）

User.vue（动态路由）

Login.vue（登录页）

Dashboard.vue（嵌套父路由）

Profile.vue + Order.vue（子页面）

NotFound.vue

五、运行项目

npm run dev

六、这个示例包含的所有功能

1. 基础路由：/ /about
2. 动态路由：/user/1001
3. 嵌套路由：/dashboard/profile
4. 路由懒加载：优化性能
5. 路由守卫：登录权限控制
6. 404 页面
7. 组合式 API：useRouter useRoute
8. 声明式导航 + 编程式导航

总结

这是企业级标准 Vue3 路由完整示例，直接复制即可运行，包含你开发项目会用到的 99% 路由功能。