vue3路由跳转传参

首先在页面引入router

import router from "../../router/index";

然后传值就是

   router.push({path:'/addShop',query:{id:id}})

在另一个页面接受到的是

在这里插入代码片{currentRoute: RefImpl, addRoute: ƒ, removeRoute: ƒ, hasRoute: ƒ, getRoutes: ƒ, …}
addRoute: ƒ addRoute(parentOrRoute, route)
afterEach: ƒ add(handler)
back: () => go(-1)
beforeEach: ƒ add(handler)
beforeResolve: ƒ add(handler)
currentRoute: RefImpl
__v_isRef: true
_rawValue:
fullPath: "/addShop?id=10964"
hash: ""
href: "/addShop?id=10964"
matched: (2) [{…}, {…}]
meta: {}
name: "addShop"
params: {}
path: "/addShop"
query: {id: "10964"}
redirectedFrom: undefined
__proto__: Object
_shallow: true
_value: {fullPath: "/addShop?id=10964", path: "/addShop", query: {…}, hash: "", name: "addShop", …}
value: Object
__proto__: Object
forward: () => go(1)
g
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3中,可以使用三种方式进行路由跳:通过params、query和动态路由。 1. 通过params进行: 在跳前,使用`router.push`方法,并在`params`对象中指定数名和对应的值。例如: ```javascript function acty() { router.push({ name: 'tiaozhn', params: { id: "aaa" } }) } ``` 在目标组件中,可以通过`$route.params`来获取递的数。例如: ```javascript console.log($route.params.id); ``` 这样就可以获取到递的数值。 2. 通过query进行: 在跳前,使用`router.push`方法,并在`query`对象中指定数名和对应的值。例如: ```javascript function acty() { router.push({ path: '/tiaozhn', query: { som: "Aaa" } }) } ``` 在目标组件中,可以通过`$route.query`来获取递的数。例如: ```javascript console.log($route.query.som); ``` 这样就可以获取到递的数值。 3. 使用动态路由进行: 在跳前,可以通过在路径中添加数来进行。例如: ```javascript function acty() { var id = 1; proxy.$router.push('/tiaozhn/' + id) } ``` 在目标组件中,可以通过`$route.params`来获取递的数。例如: ```javascript console.log(proxy.$route.params.id); ``` 这样就可以获取到递的数值。 总结:在Vue3中,可以使用params、query和动态路由这三种方式进行路由跳,根据需求选择合适的方式即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [VUE3 跳的三种方式](https://blog.csdn.net/qq_54602808/article/details/119789250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值