懂了这个，前端搭建0-1的项目就没有任何问题

一、Vue Router基础概念

Vue Router主要用于管理单页应用中不同视图(组件)之间的切换，它通过URL的变化来映射不同的组件。核心概念包括：

‌路由(Route) ‌：定义URL路径与组件的映射关系
‌路由器(Router) ‌：管理所有路由规则的实例
‌路由视图(RouterView) ‌：显示当前路由匹配的组件
‌路由链接(RouterLink) ‌：用于导航的特殊组件

二、安装与基本配置

1. 安装Vue Router

首先需要通过npm安装vue-router插件2：

bash 复制代码

npm install vue-router

2. 创建路由实例

在项目中创建router.js文件，配置基本路由3：

javascript 复制代码

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

3. 在main.js中引入路由

javascript 复制代码

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

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

三、路由模式

Vue Router支持两种路由模式：

‌History模式 ‌：使用createWebHistory()创建，URL更简洁(如/about)
- 需要服务器配置支持，否则刷新页面会404
- 适合生产环境使用
‌Hash模式 ‌：使用createWebHashHistory()创建，URL带#(如/#/about)
- 不需要服务器额外配置
- 适合开发环境或简单项目

javascript 复制代码

javascriptCopy Code
// 切换为Hash模式
import { createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
})

四、路由导航

1. 声明式导航

使用<router-link>组件创建导航链接：

javascript 复制代码

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

2. 编程式导航

在组件方法中使用router实例导航：

javascript 复制代码

// 跳转到指定路径
this.$router.push('/about')

// 替换当前路由(不保留历史记录)
this.$router.replace('/about')

// 前进/后退
this.$router.go(1)  // 前进一步
this.$router.go(-1) // 后退一步

五、路由传参

1. 路径参数

定义动态路由：

javascript 复制代码

{
  path: '/user/:id',
  component: User
}

获取参数：

javascript 复制代码

this.$route.params.id

2. 查询参数

通过URL查询字符串传参：

javascript 复制代码

this.$router.push('/user?name=John')

获取参数：

javascript 复制代码

this.$route.query.name

3. Props传参

可以将路由参数作为props传递给组件：

javascript 复制代码

{
  path: '/user/:id',
  component: User,
  props: true
}

六、嵌套路由

嵌套路由允许在组件内部再嵌套其他路由视图：

javascript 复制代码

{
  path: '/user/:id',
  component: User,
  children: [
    { path: 'profile', component: Profile },
    { path: 'posts', component: Posts }
  ]
}

在User组件中添加<router-view>：

javascript 复制代码

<div>
  <h2>用户信息</h2>
  <router-view></router-view>
</div>

七、导航守卫

导航守卫用于控制路由跳转：

1. 全局前置守卫

javascript 复制代码

router.beforeEach((to, from, next) => {
  // 验证登录状态等
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. 路由独享守卫

javascript 复制代码

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 验证管理员权限
  }
}

3. 组件内守卫

javascript 复制代码

export default {
  beforeRouteEnter(to, from, next) {
    // 组件渲染前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 离开该组件时调用
  }
}

八、路由懒加载

使用动态导入实现路由懒加载，优化应用性能：

javascript 复制代码

{
  path: '/about',
  component: () => import('./views/About.vue')
}

九、路由元信息

可以为路由定义元数据，用于权限控制等场景：

javascript 复制代码

{
  path: '/admin',
  component: Admin,
  meta: { requiresAuth: true }
}

十、常见问题解决方案

‌刷新404问题‌：History模式需要服务器配置，将所有请求重定向到index.html
‌路由重复跳转警告‌：在push/replace时捕获异常
‌滚动行为控制‌：可以配置scrollBehavior选项
‌动态添加路由‌：使用router.addRoute()方法