vue跳转携带参数 现在不跳转直接带参数写死变成单独页面 怎么写
时间: 2024-05-05 10:22:53 浏览: 53
vue从一个页面跳转到另一个页面并携带参数的解决方法
如果您要在Vue中将参数传递到另一个页面,可以使用Vue Router。您可以使用路由参数来传递数据,例如:
```
// 在当前页面中定义路由
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
// 在当前页面中跳转到另一个页面,并传递参数
this.$router.push({ path: '/user/' + this.userId })
// 在接收参数的页面中,可以使用$route.params来获取参数
export default {
computed: {
userId () {
return this.$route.params.id
}
}
}
```
如果您想在不使用路由的情况下将参数传递到另一个页面,您可以考虑使用Vuex。您可以将参数存储在Vuex中,并从另一个页面中访问它。例如:
```
// 在Vuex中定义一个变量,用于存储参数
const store = new Vuex.Store({
state: {
userId: ''
},
mutations: {
setUserId (state, userId) {
state.userId = userId
}
}
})
// 在当前页面中设置参数
this.$store.commit('setUserId', this.userId)
// 在接收参数的页面中,可以使用$store.state来访问参数
export default {
computed: {
userId () {
return this.$store.state.userId
}
}
}
```
请注意,如果您不想使用路由或Vuex,您也可以考虑使用localStorage或sessionStorage来存储参数,并从另一个页面中访问它。但是,使用localStorage或sessionStorage可能会导致安全问题,因此请谨慎使用。
阅读全文