vue 路由跳转传参

Vue路由跳转通常通过动态路径参数(/:param)或查询参数(?key=value)来传递参数。这里有几种常见的方法：

动态路由参数:
使用 router-link 或 this.$router.push 的形式，如 /<component-name :id="item.id">。这里的:id是一个占位符，当你导航到这个链接时，id的值会被自动解析并传递给对应的组件。

// 路由配置
{
path: '/detail/:itemId',
component: DetailComponent,
}

// 跳转并传参
this.$router.push({ name: 'detail', params: { itemId: 123 } })
登录后复制

查询参数:
对于状态无关且不会改变浏览器历史记录的情况，可以使用查询字符串 (?key=value)。

// 路由配置
{
path: '/search',
query: {
keyword: '',
},
component: SearchComponent,
}

// 跳转并传参
this.$router.push({ path: '/search', query: { keyword: 'Vue' } })
登录后复制

Vuex:
如果需要在多个地方传递参数并且希望保持状态一致性，可以考虑使用Vuex存储数据，然后在路由守卫里获取这些数据。

// 在store中设置参数
this.$store.commit('setSearchKeyword', 'Vue')

// 守卫获取参数
router.beforeEach((to, from, next) => {
if (to.meta.requiresSearchKeyword) {
// 在这里检查是否存在搜索关键词并进行跳转
}
next()
})
登录后复制