Vue3 + Vue Router 4完整示例代码(可直接运行)

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

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

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

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

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link> |
    <router-link to="/user/1001">用户 1001</router-link> |
    <router-link to="/dashboard">控制台</router-link> |
    <router-link to="/login">登录</router-link>
  </nav>

  <div style="padding: 20px;">
    <router-view></router-view> <!-- 页面出口 -->
  </div>
</template>

<template>
  <h2>首页（需要登录）</h2>
  <button @click="goToAbout">跳转到关于页</button>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const goToAbout = () => {
  router.push('/about')
}
</script>

<template>
  <h2>关于页</h2>
  <p>当前路径：{{ route.path }}</p>
  <button @click="back">返回</button>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const back = () => {
  router.go(-1)
}
</script>

<template>
  <h2>用户页</h2>
  <p>用户 ID：{{ route.params.id }}</p>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <h2>登录页</h2>
  <button @click="login">登录</button>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const login = () => {
  localStorage.setItem('token', '123456') // 模拟登录
  router.push('/') // 跳回首页
}
</script>

<template>
  <h2>控制台</h2>
  <router-link to="/dashboard/profile">个人资料</router-link> |
  <router-link to="/dashboard/order">订单</router-link>
  <router-view></router-view>
</template>

<!-- Profile.vue -->
<template><h4>个人资料</h4></template>
<!-- Order.vue -->
<template><h4>订单页面</h4></template>

<template>
  <h2>404 页面不存在</h2>
</template>

npm run dev