为什么自己做的网站用QQ打不开优秀网页设计作品

为什么自己做的网站用QQ打不开,优秀网页设计作品,顺德企业手机网站建设,会展相关app和网站的建设情况在前端路由开发中#xff0c;动态路由与路由参数是实现页面间数据传递、构建灵活页面结构的核心技术。其中#xff0c;params和query是两种最常用的路由参数传递方式#xff0c;不少开发者在实际使用中容易混淆二者的用法与适用场景。本文将从概念定义、核心区别、实战用法三…在前端路由开发中动态路由与路由参数是实现页面间数据传递、构建灵活页面结构的核心技术。其中params和query是两种最常用的路由参数传递方式不少开发者在实际使用中容易混淆二者的用法与适用场景。本文将从概念定义、核心区别、实战用法三个维度带你彻底搞懂params与query的“前世今生”轻松应对前端路由参数传递需求。一、先搞懂动态路由与路由参数的基础认知在正式对比params与query之前我们先明确两个基础概念避免后续理解偏差。所谓动态路由简单来说就是路由规则中包含“可变部分”通过这部分可变内容匹配不同的页面组件实现“一个路由模板对应多个页面实例”的效果。比如常见的“商品详情页”不同商品对应不同的详情页此时就可以用动态路由定义为/goods/:id其中:id就是动态路由的可变部分也就是我们所说的“路由参数”。而路由参数就是通过路由传递的数据用于在不同页面间共享信息比如商品ID、用户ID、筛选条件等。params和query正是承载这些数据的两种不同“载体”二者在传递方式、显示形式、使用规则上都存在显著差异。二、核心区别params与query的5个关键差异点这部分是本文的核心我们通过“对比表格详细说明”的形式让二者的差异一目了然。对比维度params 参数query 参数传递方式通过路由路径的“动态片段”传递需在路由规则中定义通过URL的“查询字符串”传递格式为 ?keyvaluekey2value2URL显示参数会融入URL路径中不显示key仅显示value如 /goods/123参数显示在URL的查询字符串中包含key和value如 /goods?id123name手机路由规则依赖必须在路由规则中预先定义动态片段如 /goods/:id否则无法获取无需在路由规则中定义可直接在跳转时追加参数可选性默认必填若未传递路由匹配失败页面无法显示可通过 ? 标记为可选如 /goods/:id?完全可选可传递任意数量的参数不影响路由匹配页面刷新后参数会保留因融入URL路径刷新时路由重新匹配参数可正常获取参数会保留查询字符串在刷新时不会丢失可正常获取补充说明关于“刷新后参数丢失”的常见误区很多初学者会误以为“params参数刷新后会丢失”这其实是错误的认知。只要参数已经融入URL路径中即路由规则正确定义了动态片段刷新后params参数就不会丢失。真正会导致params丢失的场景是未在路由规则中定义动态片段却通过 params 传递参数此时参数仅存储在内存中未同步到URL这种情况下刷新页面参数才会丢失。而query参数因为始终同步在URL的查询字符串中无论是否定义路由规则刷新后都不会丢失这一点是明确的。三、实战用法以Vue Router为例React Router逻辑类似理论讲完我们结合实际代码示例看看params和query在项目中如何使用。这里以Vue Router 4.x为例React Router的用法逻辑一致仅API存在差异如React Router用 useParams、useSearchParams 替代。1. params 参数的使用步骤步骤1在路由规则中定义动态片段// router/index.jsimport{createRouter,createWebHistory}fromvue-routerimportGoodsDetailfrom/views/GoodsDetail.vueconstroutes[// 定义动态路由:id 是动态片段params参数{path:/goods/:id,name:GoodsDetail,component:GoodsDetail}]constroutercreateRouter({history:createWebHistory(),routes})exportdefaultrouter步骤2页面跳转时传递params参数方式1通过 组件声明式导航!-- 传递 params 参数id123 -- router-link :to{ name: GoodsDetail, params: { id: 123 } } 查看商品123详情 /router-link方式2通过 router.push 方法编程式导航// 编程式导航传递 params 参数this.$router.push({name:GoodsDetail,// 注意用params必须指定name不能用pathparams:{id:123}})步骤3在目标页面GoodsDetail获取params参数// Vue3 组合式APIimport{useRoute}fromvue-routerconstrouteuseRoute()console.log(商品ID,route.params.id)// 输出123// Vue2 选项式APIconsole.log(商品ID,this.$route.params.id)// 输出1232. query 参数的使用步骤query参数无需在路由规则中定义使用更灵活步骤如下步骤1直接跳转时传递query参数方式1通过 组件声明式导航!-- 传递 query 参数id123name手机 -- router-link :to{ path: /goods, query: { id: 123, name: 手机 } } 查看商品详情 /router-link方式2通过 router.push 方法编程式导航// 编程式导航传递 query 参数可用path或namethis.$router.push({path:/goods,// 用path也可以传递queryquery:{id:123,name:手机}})步骤2在目标页面获取query参数// Vue3 组合式APIimport{useRoute}fromvue-routerconstrouteuseRoute()console.log(商品ID,route.query.id)// 输出123console.log(商品名称,route.query.name)// 输出手机// Vue2 选项式APIconsole.log(商品ID,this.$route.query.id)console.log(商品名称,this.$route.query.name)3. 关键注意点总结传递params参数时必须使用name跳转不能用path若用pathparams参数会被忽略传递query参数时可使用path或name跳转两种方式都有效params参数默认必填若需可选需在路由规则中添加 ?如 /goods/:id?query参数支持传递多个键值对且可以传递数组如 query: { ids: [1,2,3] }URL会显示为 ?ids1ids2ids3。四、使用场景推荐什么时候用params什么时候用query根据二者的特性我们可以总结出明确的使用场景避免滥用导致问题1. 优先使用 params 的场景参数是页面的“核心标识”必须存在才能正常显示页面如商品ID、用户ID、文章ID等希望URL更简洁、美观不暴露参数名如 /user/100 比 /user?id100 更简洁参数是路由的一部分需要参与路由匹配如不同ID对应不同的资源详情。2. 优先使用 query 的场景参数是“可选筛选条件”不影响页面核心内容展示如列表页的页码、搜索关键词、排序方式等需要传递多个可选参数且参数可能动态增减如筛选页的多条件筛选价格区间、品牌、销量等希望参数可被用户直接修改如用户可以手动修改URL中的页码直接跳转到指定页跨页面传递临时数据无需融入路由核心匹配规则。五、常见问题排查新手容易踩的3个坑坑1用path跳转时params参数丢失原因Vue Router规定path跳转时会忽略params参数。解决方案传递params参数时改用name跳转或把参数改为query传递。坑2params参数刷新后丢失原因未在路由规则中定义动态片段仅通过 params 传递参数参数未同步到URL。解决方案在路由规则中添加对应的动态片段如 /goods/:id确保参数融入URL。坑3query参数获取为字符串类型原因query参数通过URL传递默认都是字符串类型即使传递的是数字获取时也会转为字符串。解决方案在获取参数后手动转为对应类型如 Number(route.query.page)。六、总结params和query都是前端路由传递参数的重要方式核心区别在于“是否融入路由路径”和“是否依赖路由规则定义”params是“路由路径的一部分”适合传递核心标识参数URL简洁但参数必填可配置可选query是“URL的查询字符串”适合传递可选筛选参数使用灵活但URL会暴露参数名。掌握二者的区别与适用场景就能在实际开发中根据需求灵活选择避免出现参数丢失、路由匹配失败等问题。如果在使用过程中还有其他疑问欢迎在评论区留言讨论