Vue中对动态路由的理解,定义以及如何获取传递过来的动态参数


一、动态路由的理解
动态路由 就是把匹配某种模式下的路由映射到同一个组件中,其实本质就是通过url进行传参,比如说:有一个商Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就,需要用到动态路由了。
二、动态路由的配置
可以通过两种方式来传递动态参数
1.params
2.query
以上代码的演示都是在history的路由模式下
params方式 传参
配置路由的方式,使用冒号:绑定动态参数
//index.js中配置路由信息
const routes=[{
path:’/godds/:id’,
components:Goods
}]
路由跳转是,分为:
1.使用router-link方式实现路由跳转
此种方式下,一可以使用字符串,在路径后面直接跟上你对应的值,如:
App.vue

点击查看代码
 <template>
    <div id="app">
	<router-link :to='/goods/'+id">商品</router-link>
	<router-view/>
	</div>
   </template>
   <script>
   export default{
     name:'App',
	 data(){
	 return {
	 id:'001'
	 }
	 }
   }
   </script>

二、可以使用对象的方式,如:
![image](https://www.icode9.com/i/l/?n=22&i=blog/2821749/202207/2821749-20220709075730169-244798602.png)
注意:
1.params 方法中,to属性使用对象的方式,必须由name属性引入路由,不能用path.
2.params方法传参时,属性名必须跟配置路由时的动态参数名一致,否则报错
使用$router的方式进行路由 的跳转
方法一1,
this.$router.push(‘/goods/’+this.goodsId)
方法2,
this.$router.push({
name:’goods’,
params:{
id:this.goodsId
}
})
})
params方式的传参,对应的传参后的url地址如下所示
localhost:8080/goods/001
获取参数的方式
$router.params.如本例中想要获取id的值,对应代码为
$router.params.id
query方式的传参
配置路由时,普通配置即可,即原来怎么配置路由,现在就怎么配置路由,
const routes=[{
path:’/goods’,
name:’goods’
component:Goods
}]
路由挑转时,分为
1.使用router-link方式实现路由跳转
query传参的方式只可以通过对象,不可以使用字符传
商品
2.使用$router的方式进行路由的跳转
this.$router.push({
path:’/goods’,
query:{
id:this.goodsId
}
})

 this.$router.push({
 path:'goods',
 query:{
 id:this.goodsId
 }
 })
 query方式的传参,赌赢传参后的url地址显示为
 localhost:8080/goods?id=001
 
 注意:query方式的传参,query对象里面的属性名可以随便起名,不像params方式传参时受限
 同时,此种方式下路由的引入既可以使用path属性,也可以使用name属性
 获取参数的方式
 $router.query.如本例中想要获取 id值
 $route.query.id
 
 总之,千万要注意:

(1)、params方式路由的引入只能用name,query方式路由的引入可以用name和path。
(2)、路由跳转使用 “router”;获取参数使用“route”

原创文章,作者:jamestackk,如若转载,请注明出处:https://blog.ytso.com/272707.html

(0)
上一篇 2022年7月9日
下一篇 2022年7月9日

相关推荐

发表回复

登录后才能评论