一、基础配置，让Vue Router在Vite项目里跑起来

terry 11小时前阅读数 11 #Vue

不少刚开始用Vue 3 + Vite 搭项目的同学，都会纠结“vue router和vite到底咋结合用？”，毕竟Vue Router负责前端路由管理，Vite是新一代构建工具，两者配合得好能让开发体验和项目性能起飞，今天就从基础配置、进阶玩法到生产优化,一步步把这事讲透。

首先得明确版本适配，Vue 3得配Vue Router 4+，Vite本身对Vue生态支持很友好，步骤拆解：

安装依赖
打开终端，在Vite项目根目录执行：
```
npm install vue-router@4
```
（用yarn或pnpm也一样，比如pnpm add vue-router@4）

初始化路由文件
在src下新建router文件夹，再建index.js（或index.ts，用TS的话更严谨），代码结构大概这样：

import { createRouter, createWebHistory } from 'vue-router'
// 引入页面组件，比如Home和About
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

const router = createRouter({ // Vite项目里用createWebHistory，对应history模式；如果要hash模式用createWebHashHistory history: createWebHistory(), routes })

export default router


3. **注入到Vue实例**  
打开`src/main.js`（Vite默认入口），把router挂到App上：  
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入刚写的路由配置
const app = createApp(App)
app.use(router) // 注册路由插件
app.mount('#app')

页面里用路由组件
在App.vue里加<router-view>显示匹配的页面，用<router-link>做导航：

<template>
<div>
 <router-link to="/">首页</router-link>
 <router-link to="/about">lt;/router-link>
 <router-view></router-view>
</div>
</template>

这样基础路由就跑通了，接下来看更实用的进阶技巧。

路由懒加载：Vite下怎么让页面“按需加载”？

传统webpack用require.ensure，但Vite基于ES模块，直接用import()就能实现懒加载，好处是首屏加载更快，因为页面组件代码分包，访问时再加载。

改造路由配置里的component，比如把Home和About改成懒加载：

const routes = [
  {
    path: '/',
    name: 'Home',
    // 注意：import()里的路径要符合Vite的解析规则，相对路径要写全
    component: () => import('../views/Home.vue') 
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

Vite会自动帮我们做代码分割，每个页面组件生成单独的chunk，如果想给 chunk 取别名（方便调试或优化），可以加注释：

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

虽然注释里写了webpack，但Vite也能识别这个命名逻辑，打包后chunk名字更友好。

动态路由：参数传递与匹配怎么玩？

项目里经常需要“/user/123”这种带参数的路由，Vue Router + Vite 下实现很丝滑。

配置动态路由规则
在routes里加一条：

{
path: '/user/:id', // :id是动态参数
name: 'User',
component: () => import('../views/User.vue')
}

页面内获取参数
在User.vue里，用useRoute钩子（Vue Router 4的组合式API）：
```
<template>
<div>用户ID：{{ route.params.id }}</div>
</template>
```

```

导航跳转传参
用<router-link>或者useRouter的push方法：

<!-- 用router-link -->
<router-link :to="{ name: 'User', params: { id: 123 }}">去用户页</router-link>

```

路由守卫：控制页面权限、跳转逻辑

路由守卫分全局守卫、路由独享守卫、组件内守卫，Vite环境下写法和Vue Router 4的规范一致，举几个常用场景：

全局前置守卫（验证登录状态）

在router/index.js里加：

router.beforeEach((to, from, next) => {
  // 假设isAuthenticated是判断是否登录的函数
  if (to.name !== 'Login' && !isAuthenticated()) {
    next({ name: 'Login' }) // 没登录就跳登录页
  } else {
    next() // 放行
  }
})

如果用组合式API，也能在main.js里通过app.config.globalProperties搞，但更推荐在router实例上直接写。

路由独享守卫（某个路由的权限）

在routes的单个路由配置里加：

{
  path: '/admin',
  name: 'Admin',
  component: () => import('../views/Admin.vue'),
  beforeEnter: (to, from, next) => {
    if (isAdmin()) { // 判断是否管理员
      next()
    } else {
      next({ name: 'Home' })
    }
  }
}

组件内守卫（进入/离开组件时触发）

在Admin.vue里用组合式API：

<script setup>
import { onBeforeRouteEnter, onBeforeRouteLeave } from 'vue-router'
// 进入组件前触发，此时组件实例还没创建，不能用setup里的变量
onBeforeRouteEnter((to, from, next) => {
  console.log('准备进入Admin页')
  next()
})
// 离开组件时触发
onBeforeRouteLeave((to, from, next) => {
  const confirmLeave = window.confirm('确定要离开吗？')
  if (confirmLeave) {
    next()
  } else {
    next(false) // 取消跳转
  }
})
</script>

生产环境优化：让路由更“丝滑”的小技巧

Vite打包后要考虑性能，路由这块可以做这些优化：

路由预加载（Prefetch）

如果某些路由用户很可能访问（比如首页跳转到的二级页），可以在路由配置里加meta标记，结合全局守卫预加载：

{
  path: '/article',
  name: 'Article',
  component: () => import('../views/Article.vue'),
  meta: { prefetch: true } // 标记需要预加载
}

然后在router.beforeEach里判断：

router.beforeEach((to, from, next) => {
  if (to.meta.prefetch) {
    // 预加载组件，import()返回的Promise会被Vite处理
    import(`../views/${to.name}.vue`) 
  }
  next()
})

这样用户还没点进Article页，代码已经提前加载，切换时更流畅。

处理404页面

加一个通配符路由，放在routes路由匹配是从上到下，所以404要兜底）：

{
  path: '/:pathMatch(.*)*', // 匹配所有未定义的路由
  name: 'NotFound',
  component: () => import('../views/NotFound.vue')
}

路由模块化拆分

如果项目很大，把routes拆成多个文件，比如router/modules/home.js、router/modules/user.js，然后在router/index.js里统一引入：

import { createRouter, createWebHistory } from 'vue-router'
import homeRoutes from './modules/home.js'
import userRoutes from './modules/user.js'
const routes = [
  ...homeRoutes,
  ...userRoutes,
  // 其他路由...
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

这样代码结构更清晰，维护起来方便。

避坑指南：这些细节容易踩雷

路径解析问题：Vite对相对路径要求严格，import组件时要写全../views/Home.vue，不能省略.vue后缀（开发时Vite支持省略，但打包可能报错，所以统一写上更稳）。
路由模式与部署：用createWebHistory（history模式）时，部署到服务器要配置 fallback（比如Nginx配try_files $uri $uri/ /index.html;），否则刷新页面会404；如果不想配服务器，就用createWebHashHistory（hash模式），路径带，兼容性好但URL不美观。
TS类型支持：如果用TypeScript，给路由加类型约束更安全，可以定义RouteRecordRaw数组，或者用defineComponent包装组件，让VSCode能自动提示路由名、参数等。
动态导入缓存：如果动态路由的组件频繁更新，开发时可以加?timestamp参数破缓存，比如import('../views/Article.vue?t=' + Date.now())，生产环境不用，Vite打包会自动处理哈希。

把Vue Router和Vite结合好，核心是理解两者的工作逻辑：Vite负责高效构建和模块加载，Vue Router负责路由管理和页面跳转，从基础配置到懒加载、动态路由，再到生产优化，每一步都围绕“开发体验”和“用户体验”做文章，实际项目里，还可以结合Pinia做状态管理、用Vite插件优化性能，把整个Vue生态的优势拉满，要是你在配置过程中遇到“路由跳转没反应”“懒加载chunk报错”这类问题，先检查路径是否正确、依赖版本是否匹配,大部分坑都是细节没注意到～