Vue3 页面跳转与参数传递全面指南

一、Vue Router 基础与跳转方式

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用(SPA)。在 Vue3 中，它提供了两种主要的页面跳转方式：声明式导航和编程式导航。

1. 声明式导航

使用 <router-link> 组件实现导航，这是最直观的方式：

<!-- 基本跳转 -->
<router-link to="/home">首页</router-link>

<!-- 带参数跳转 -->
<router-link :to="{ name: 'user', params: { userId: 123 } }">用户</router-link>

2. 编程式导航

通过 JavaScript 代码控制路由跳转，提供了更灵活的控制：

import { useRouter } from 'vue-router'

const router = useRouter()

// 基本跳转
router.push('/home')

// 带参数跳转
router.push({
  name: 'user',
  params: { userId: 123 }
})

二、参数传递的三种主要方式

1. 动态路由参数(params)

特点：

• 参数直接嵌入URL路径中
• 需要在路由配置中预先定义参数占位符
• 刷新页面后参数不会丢失

实现方法：

1. 路由配置：

{
  path: '/user/:userId',
  name: 'user',
  component: UserDetail
}

2. 跳转传参：

router.push({
  name: 'user',
  params: { userId: 123 }
})

3. 接收参数：

import { useRoute } from 'vue-router'

const route = useRoute()
const userId = route.params.userId

注意事项：

• 参数只能是字符串类型，需要手动转换其他类型
• 参数名必须与路由配置中的占位符一致
• URL长度有限制，不适合传递大量数据

2. 查询参数(query)

特点：

• 参数以?key=value形式附加在URL后
• 不需要预先定义参数
• 适合传递多个非敏感参数

实现方法：

1. 跳转传参：

router.push({
  path: '/search',
  query: {
    keyword: 'vue',
    page: 1
  }
})

2. 接收参数：

const keyword = route.query.keyword
const page = route.query.page

优势：

• 参数直接可见于URL，便于分享和书签
• 可以传递数组和对象(需序列化)
• 不受路由配置限制

3. 隐式参数(params不显示在URL)

特点：

• 参数通过内存传递，不显示在URL中
• 刷新页面后参数会丢失
• 适合传递复杂对象或临时数据168

实现方法：

1. 跳转传参：

router.push({
  name: 'productDetail',
  params: {
    product: { id: 1, name: '手机', price: 2999 },
    from: 'home'
  }
})

2. 接收参数：

const product = route.params.product
const from = route.params.from

注意事项：

• 必须使用命名路由(name)，不能使用path
• 不适合关键数据，仅限临时使用
• 大对象可能影响性能

三、高级场景与最佳实践

1. 状态管理结合路由

对于复杂应用，建议将路由参数与状态管理(Pinia/Vuex)结合：

// 存储到Pinia
const productStore = useProductStore()
productStore.setCurrentProduct(product)

// 跳转时只传递ID
router.push({
  name: 'productDetail',
  params: { productId: product.id }
})

// 详情页从store获取完整数据
const product = productStore.getProductById(route.params.productId)

优势：

• 避免URL长度限制
• 数据更安全
• 支持复杂数据类型

2. 路由守卫中的参数处理

可以在导航守卫中统一处理参数：

router.beforeEach((to, from, next) => {
  // 验证必要参数
  if (to.name === 'payment' && !to.params.orderId) {
    next({ name: 'cart' }) // 缺少参数则重定向
  } else {
    next()
  }
})

3. Keep-Alive与路由参数

使用Keep-Alive缓存页面时，需要注意参数变化：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" :key="route.fullPath" />
  </keep-alive>
</router-view>

通过设置唯一的key确保参数变化时组件更新

四、常见问题与解决方案

1. 刷新页面参数丢失

问题：使用隐式params传参时，刷新页面参数丢失

解决方案：

• 改用动态路由或query参数
• 将关键数据存入sessionStorage1

// 跳转前存储
sessionStorage.setItem('tempData', JSON.stringify(data))

// 页面加载时恢复
if (sessionStorage.getItem('tempData')) {
  const data = JSON.parse(sessionStorage.getItem('tempData'))
  sessionStorage.removeItem('tempData')
}

2. 参数类型问题

问题：路由参数默认是字符串类型

解决方案：

// 显式转换类型
const page = Number(route.query.page) || 1
const isActive = route.query.active === 'true'

3. 长列表参数传递

问题：需要传递数组等大量数据

解决方案：

• 只传递ID，通过API重新获取
• 使用状态管理
• 压缩数据后存入sessionStorage35

五、总结：如何选择传参方式

场景	推荐方式	优点	缺点
传递简单ID或关键标识符	动态路由params	URL可分享，刷新不丢失	只适合简单数据
搜索、过滤等多参数场景	query参数	灵活，参数可见	URL冗长
临时传递复杂对象	隐式params+sessionStorage	支持复杂数据结构	刷新丢失，需额外处理
全局共享状态	状态管理+简单路由参数	数据安全，支持复杂类型	需要学习状态管理库

在实际开发中，应根据具体需求选择合适的传参方式，通常建议：

1. 关键业务ID使用动态路由params
2. 筛选条件使用query参数
3. 复杂对象使用状态管理+简单路由参数
4. 临时数据使用sessionStorage辅助

通过合理组合这些方式，可以构建出既灵活又可靠的页面跳转与参数传递机制。