脚本宝典收集整理的这篇文章主要介绍了vue动态路由是什么意思,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在vue中,动态路由就是将匹配某种模式下的路由映射到同个组件中,动态路由的本质就是通过url进行传参;可以通过“params”和“query”两种方式来传递动态参数。
本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。
动态路由就是把匹配某种模式下的路由映射到同个组件中,其实本质就是通过url进行传参
比如说:有一个商品Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就需要用到动态路由了。
可以通过两种方式来传递动态参数:
(1)、params
(2)、query
注意:以下代码的演示都是在history的路由模式下
配置路由的方式:使用冒号:绑定动态参数。
//index.js中配置路由信息 const routes = [{ path: '/goods/:id', component: Goods}]
路由跳转时,分为:
(1)使用router-link方式实现路由跳转
此种方式下,一可以使用字符串,在路径后面直接跟上对应的值,如:
//方法1 this.$router.push('/goods/' + this.goodsId) //方法2 this.$router.push({ name: 'goods', params: { id: this.goodsId }})
params方式的传参,对应传参后的url地址如下所示:
$route.params.id
配置路由时,普通配置即可,即原来怎么配置路由,现在就还怎么配置。如:
const routes = [{ path: '/goods', name: 'goods', component: Goods}]
路由跳转时,分为:
(1)使用router-link方式实现路由跳转
query传参的方式只可以通过对象,不可以使用字符串
<router-link :to="{path: '/goods', query: {id: goodsId}}">商品</router-link>
(2)、使用$router的方式进行路由的跳转
this.$router.push({ path: '/goods', query: { id: this.goodsId } })
this.$router.push({ path: '/goods', query: { id: this.goodsId } })
query方式的传参,对应传参后的url地址显示为:
$route.query.id
总之,千万要注意:
(1)、params方式路由的引入只能用name,query方式路由的引入可以用name和path。
(2)、路由跳转使用 “router”;获取参数使用“route”
【相关推荐:《vue.js教程》】
以上就是vue动态路由是什么意思的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue动态路由是什么意思全部内容,希望文章能够帮你解决vue动态路由是什么意思所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。