Mpvue路由传参

本文详细介绍了在小程序中如何通过路由传递参数,并展示了在目标页面如何接收这些参数的方法。包括了原生小程序的onLoad方法和mpvue框架下的mounted生命周期钩子的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由传参:

 wx.navigateTo({url:`../${page}/main?param=${param}`});  //参数以'?'开始 以'&'分隔

在目标页面获取传过来的参数:

小程序原生写法:

onLoad(options){
  console.log(options); //{'param' : param}
}

mpvue中的写法(mpvue兼容原生写法):

mounted(){
    console.log(this.$root.$mp.query) //{'param' : param}
}

 

<think>好的,我现在需要回答用户关于动态路由传参和普通路由传参的区别、原理及用法的问题。首先,我要回顾一下之前用户提供的引用内容,看看里面有哪些有用的信息。引用[1]提到动态路由用于商品详情页,通过商品id传参,页面结构相同但内容不同。这说明动态路由传参适用于路径中包含变量的情况,比如不同的商品ID。而普通路由传参可能指的是查询参数(query parameters)或者通过路径参数(pathparameters)之外的传参方式,比如在URL后面加问号参数。引用[2]详细说明了Vue中$route对象的属性,包括params和query。这里params是动态路由的片段,而query是查询参数。动态路由传参使用的是params,而普通传参可能用的是query或者state等方式。比如,动态路由的路径可能像/newDetail/123,而普通传参可能像/homeDetail?id=123。引用[3]给出了两种传参方式的具体例子:一种是动态路由传参,在路由配置中使用形参,如/newDetail/:aid,跳转时传值路径是/newDetail/123,子页面通过$route.params获取;另一种是get传值,路径为/homeDetail?id=123,子页面通过$route.query获取。这说明动态路由传参是通过路径中的参数部分传递,而普通传参可能通过查询字符串传递。 引用[4]提到Flutter中的动态路由传参,使用onGenerateRoute处理参数参数封装成map。这说明不同框架可能有不同的实现方式,但核心概念类似,即动态路由在路径中嵌入参数,而普通传参可能通过其他方式传递。现在,我需要将动态路由传参与普通路由传参的区别整理出来。首先,在原理上,动态路由参数是路径的一部分,而普通传参可能是查询参数或通过状态传递。用法上,动态路由需要在路由配置中定义参数占位符,如/:id,而普通传参不需要修改路由配置,直接在URL后加参数或通过其他方式传递。参数获取方式也不同,动态路由用params,普通传参用query或state。另外,SEO方面,动态路由参数在路径中,可能更友好,而查询参数可能影响不大,但路径参数可能更直观。 然后要考虑用户可能的疑问,比如什么时候用动态路由,什么时候用普通传参。动态路由适合参数是路径的一部分,比如详情页的ID,而普通传参适合可选参数或过滤条件,比如分页、排序等。另外,动态路由参数是必传的,而查询参数是可选的。还需要注意不同框架的实现可能不同,比如Vue Router和Flutter的路由传参方式,但核心概念相似。要确保回答覆盖到这些点,但保持框架无关,或者以Vue为例,因为用户提供的引用大部分是Vue相关的。最后,生成相关问题,帮助用户进一步理解。比如参数获取方式的不同,SEO影响,如何选择传参方式等。</think>### 动态路由传参与普通路由传参的区别 #### 一、核心区别 1. **参数位置** - **动态路由传参**:参数直接嵌入URL路径中,例如:`/product/123`,其中`123`是商品ID[^3]。 - **普通路由传参**:参数通过查询字符串(`?key=value`)或隐式状态传递,例如:`/product?id=123`[^1][^3]。 2. **路由配置** - **动态路由传参**:需在路由定义中声明参数占位符,如Vue中的`path: '/product/:id'`[^3]。 - **普通路由传参**:无需修改路由配置,直接拼接参数即可[^3]。 3. **参数必传性** - **动态路由传参**:参数为路径的一部分,通常为必传项,否则路径不匹配[^3]。 - **普通路由传参**:参数为可选项,不影响路径匹配[^1]。 --- #### 二、实现原理 - **动态路由传参** 通过路由解析引擎将路径中的变量提取为`params`对象。例如,路径`/product/:id`会被解析为`{ id: '123' }`[^2][^3]。 - **普通路由传参** 参数通过URL查询字符串(`?id=123`)或编程式导航的`query`/`state`传递,最终存储在`$route.query`或路由状态中[^2][^3]。 --- #### 三、用法对比 1. **动态路由传参** - **传参方式**: ```html <router-link :to="'/product/' + productId"></router-link> ``` - **获取参数**: ```javascript this.$route.params.id // 输出 123 ``` 2. **普通路由传参** - **传参方式**: ```html <!-- 查询字符串 --> <router-link :to="'/product?id=' + productId"></router-link> <!-- 或通过对象形式 --> <router-link :to="{ path: '/product', query: { id: productId }}"></router-link> ``` - **获取参数**: ```javascript this.$route.query.id // 输出 123 ``` --- #### 四、适用场景 | **动态路由传参** | **普通路由传参** | |------------------------------|-----------------------------| | 参数是资源的唯一标识(如商品ID)[^1] | 参数为可选或过滤条件(如分页、排序) | | 需要SEO友好的URL(如`/product/123`) | 参数敏感或临时性传递(如搜索关键词) | --- #### 五、扩展对比 | **对比维度** | **动态路由传参** | **普通路由传参** | |------------------|-----------------------------|-----------------------------| | URL美观性 | 路径简洁,参数隐藏 | 带`?`符号,参数暴露 | | 浏览器历史记录 | 参数随路径保留 | 参数可能丢失(如刷新页面后) | | 参数类型支持 | 仅支持字符串 | 支持复杂对象(需序列化) | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Knight丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值