vue之路由传参方式总结

1：通过组件<router-link></router-link>传参

下面来看通过该方式的传参实例

这是用来传参的组件

<template>
<div>
	<h1>这是要传参的路由</h1>
	<router-link :to="{name:'testresult',params:{id:a,id2:b},query:{queryId:c}}">
		点击跳转到testresult路由
	</router-link>
</div>	
</template>
<script>
export default {
  data(){
  	return{
  		a:10,
  		b:20,
  		c:3
  		
  	}
  }
  
}
</script>

这里用了两种方式来传参，一种是params对象来传参，一种是通过query对象来传参。两者都可以用来传参，

name:'testresult'是要跳转的路由的name值，在index.js文件中配置好的

下面来看下接收参数的路由组件

<template>
<div>
	<h1>这是接收参数的路由</h1>
	<h1>{{$route.params}}</h1>
	<h1>{{$route.query.queryId}}</h1>
	<div>这是：{{id}}</div>
</div>	
</template>
<script>
export default {
  data(){
  	return{
  		id:''
  		
  	}
  },
   mounted:function(){
        this.id=this.$route.params.id;
       
    }
  
}
</script>

这里说明一下，如果是在<template></template>里面直接使用的话方法是{{$route.params.XX}}和{{$route.query.XX}}

如果是<script></script>里面使用的话就是this.$route.params.XX和this.$route.query.XX

注意通过params和query传参方式的区别：

	{path:'/testresult/:id',name:'testresult',component: testresult},
  	{path:'/test',name:'test',component: test},

通过params方式传过来的参数在地址栏里看不到，但是通过query方式传的参数在地址栏里能看到，如下

这里10是通过params方式传的id参数，queryId是通过query方式传参的，你可能会疑惑，不是说通过params方式传的参数在地址栏里看不到么，那是因为id参数是我在路由配置里就指定的参数，如下，看我的路由配置文件

	{path:'/testresult/:id',name:'testresult',component: testresult},
  	{path:'/test',name:'test',component: test}

所以，在路由配置里指定的参数会在地址栏里显示，而且一定要传值，因为指定的参数是路由的一部分，否则跳转的页面会显示空白。但是不是在路由配置里指定的参数又是通过params传的，则不会在地址栏里显示。

扫描二维码关注公众号，回复： 358545 查看本文章

2:通过this.$router.push()方法进行跳转的时候传参

传参实例如下

 this.$router.push({ path: 'detail',query:{id:dataid,title:titleNew,pic:p} })

如果是这样则接收参数的方法是这样的

this.$route.query.id

这样就能获得上一个路由传过来的id参数

vue之路由传参方式总结

猜你喜欢