【Vue】手把手教你配置 Vue 路由

手把手教你配置 Vue 路由（Vue3 版本）

---

第一步：安装路由库

操作：

1. 在项目根目录打开终端，输入以下命令安装路由库：

npm install vue-router@4  # Vue3 专用版本

---

第二步：创建路由配置文件

操作：

1. 在 src 文件夹下新建 router 文件夹，并在其中创建 index.js 文件：

   src/
   ├── router/
   │   └── index.js  # 路由配置文件
   

2. 编写路由配置（示例）：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'  // 引入页面组件

// 定义路由规则
const routes = [
  {
    path: '/',           // 访问路径
    name: 'home',        // 路由名称（可选）
    component: HomeView  // 对应的组件
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue') // 懒加载组件
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),  // 使用 History 模式
  routes                        // 绑定路由规则
})

export default router  // 导出路由实例

---

第三步：挂载路由到 Vue 项目

操作：

1. 在 main.js 中引入路由并挂载到 Vue 实例：

// 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')

---

第四步：在页面中使用路由

操作：

1. 在 App.vue 中添加导航链接和路由出口：

<!-- src/App.vue -->
<template>
  <div>
    <!-- 导航链接 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 路由出口：显示当前路径对应的组件 -->
    <router-view></router-view>
  </div>
</template>

---

第五步：创建页面组件

操作：

1. 在 src/views 文件夹下创建页面组件：

   src/
   ├── views/
   │   ├── HomeView.vue    # 首页组件
   │   └── AboutView.vue   # 关于页组件
   

2. 示例页面内容：

<!-- src/views/HomeView.vue -->
<template>
  <h1>欢迎来到首页！</h1>
</template>

---

第六步：配置嵌套路由（二级路由）

操作：

1. 修改路由配置文件，添加 children 属性：

// src/router/index.js
const routes = [
  {
    path: '/user',
    component: () => import('../views/UserView.vue'),
    children: [
      {
        path: 'profile',  // 访问路径：/user/profile
        component: () => import('../views/UserProfile.vue')
      },
      {
        path: 'posts',    // 访问路径：/user/posts
        component: () => import('../views/UserPosts.vue')
      }
    ]
  }
]

2. 父组件中放置 <router-view>：

<!-- src/views/UserView.vue -->
<template>
  <div>
    <h2>用户中心</h2>
    <!-- 二级路由出口 -->
    <router-view></router-view>
  </div>
</template>

---

第七步：动态路由参数

操作：

1. 在路由路径中使用 :参数名 定义动态参数：

// src/router/index.js
{
  path: '/user/:id',  // 动态参数，如 /user/123
  component: () => import('../views/UserDetail.vue')
}

2. 组件中获取参数：

<!-- src/views/UserDetail.vue -->
<script>
export default {
  mounted() {
    const userId = this.$route.params.id  // 获取参数
    console.log('用户ID:', userId)
  }
}
</script>

---

第八步：路由守卫（权限控制）

操作：

1. 在路由配置中添加全局前置守卫：

// src/router/index.js
router.beforeEach((to, from) => {
  const isLoggedIn = localStorage.getItem('token')
  // 如果访问非登录页且未登录，跳转到登录页
  if (to.path !== '/login' && !isLoggedIn) {
    return '/login'
  }
})

---

总结步骤

1. 安装路由库 → 命令：npm install vue-router@4
2. 创建路由文件 → 位置：src/router/index.js
3. 定义路由规则 → 用 routes 数组配置路径和组件
4. 挂载路由 → 在 main.js 中 app.use(router)
5. 使用路由链接和出口 → <router-link> 和 <router-view>
6. 嵌套路由 → 用 children 配置子路由
7. 动态参数 → 路径中用 :id，组件用 $route.params.id 获取
8. 路由守卫 → 用 router.beforeEach 控制权限

通过以上步骤，你可以从零开始搭建一个支持多页面跳转、嵌套路由和权限控制的 Vue3 应用！