Vue Router 完整使用示例及完整实战演示

以下是一个完整的 Vue Router 使用示例及实战演示，涵盖基础配置、动态路由、嵌套路由、导航守卫等核心功能。

---

一、环境准备

1. 创建 Vue 3 项目：

npm init vue@latest
# 选择 TypeScript/JS + Vue Router 选项

2. 手动添加 Vue Router：

npm install vue-router@4

---

二、基础路由配置

1. 目录结构

src/
├── components/
│   ├── Home.vue
│   ├── About.vue
│   └── User.vue
├── router/
│   └── index.js
└── App.vue

2. 创建组件

Home.vue:

About.vue:

3. 配置路由 (router/index.js)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(), // 启用HTML5历史模式
  routes
})

export default router

4. 挂载路由 (main.js)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

---

三、动态路由与参数传递

新增用户组件

User.vue:

更新路由配置

const routes = [
  // ...之前的路由
  { 
    path: '/user/:id', 
    name: 'User', 
    component: User, 
    props: true // 开启props传参模式
  }
]

---

四、嵌套路由实战

创建子组件

Messages.vue:

修改用户路由配置

{
  path: '/user/:id',
  name: 'User',
  component: User,
  children: [
    {
      path: 'messages',
      component: Messages,
      meta: { title: '用户消息' }
    }
  ]
}

---

五、导航守卫应用

添加全局前置守卫

router.beforeEach((to, from, next) => {
  console.log(`正在跳转到 ${to.fullPath}`)
  
  // 权限验证示例
  const isAuthenticated = false // 假设未登录
  if(to.name !== 'Home' && !isAuthenticated){
    alert('请先登录')
    next('/')
  } else {
    next()
  }
})

路由独享守卫

{
  path: '/admin',
  component: () => import('../components/Admin.vue'),
  beforeEnter: (to, from, next) => {
    if(new Date().getHours() < 9 || new Date().getHours() > 18){
      alert('非工作时间禁止访问')
      next(false)
    } else {
      next()
    }
  }
}

---

六、命名视图与多级出口

创建布局组件

Layout.vue:

配置多视图路由

{
  path: '/dashboard',
  components: {
    default: Dashboard,
    sidebar: Sidebar
  },
  children: [
    { path: '', redirect: 'stats' },
    { path: 'stats', component: Stats },
    { path: 'settings', component: Settings }
  ]
}

---

七、完整项目演示

完整代码已上传至GitHub仓库，包含以下功能：

• 基础路由跳转
• 动态路由参数解析
• 嵌套路由展示
• 导航守卫权限控制
• 多视图布局实现

运行效果截图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGGBBaQ0-1751696869407)(https://via.placeholder.com/600x400?text=Vue+Router+Demo)]

---

八、常见问题解决方案

1. history模式部署问题：

location / {
  try_files $uri $uri/ /index.html
}

2. 路由懒加载优化：

const routes = [
  {
    path: '/about',
    component: () => import('../components/About.vue')
  }
]

3. 滚动行为设置：

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 })
})

---

通过以上步骤，您可以快速掌握 Vue Router 的核心用法，并在实际项目中灵活运用各种高级特性。建议将路由配置拆分为独立模块文件进行维护，特别是在大型项目中。