vue路由传参的两种方式

vue路由传参的两种方式

路由传参的两种方式params和query

params相当于post，参数信息不会显示在地址栏中，query相当于get,会把参数信息暴露在地址栏中

params传参

第一步 在router.js中配置路由
例：

import params from '../components/params/index'
import routerTo from '../components/params/routerTo'
export default new Router({
  routes: [
   {
          path:'/params',
          name:'params',
          component:params
        },
        {
          path:'/routerTo',
          name:'routerTo',
          component:routerTo
        }
        ] 

第二步 在params.vue（传递参数的文件）文件中

	<template>
 	 <div>
	    <div @click="routerTo()" style="position:relative;top:100px;">query传参</div>
	  </div>
	</template>
	<script>
		export default{
		  methods:{
 		 routerTo(){
  		  this.$router.push({
  		  name:'routerTo',
  			 // path:'/routerTo',// path和query配套使用
  		  params:{
  		  data:'1',msg:'waf'
  			  }
  		  })
			  }
		  }
	}
	</script>
	<style>
	</style>

第三步 在routerTo.vue（接收参数的文件）文件中

	<template>
  		<div>
		<p>接收data参数{{this.data}}</p>
 	   <p>接收msg参数{{this.msg}}</p>
	  </div>
	</template>
	<script>
	  export default {
  	  data(){
    	  return {
        data:'',
        msg:''
      }
    },
    created(){
      this.getRouterData()
    },
    methods:{
      getRouterData(){
        this.data=this.$route.params.data
        this.msg=this.$route.params.msg
      }
    }
  }
</script>
<style>
</style>

query传参

第一步配置路由（方法与上面相同，此处不赘述）
第二步 在params.vue（传递参数的文件）文件中

<template>
  <div>
    <div @click="routerTo()" style="position:relative;top:100px;">query传参</div>
  </div>
</template>
<script>
export default{
  methods:{
  routerTo(){
    this.$router.push({
    // name:'routerTo',
    path:'/routerTo',// path和query配套使用
    query:{  //仅仅把params替换成query，其他都没变
    data:'1',msg:'waf'
    }
    })
  }
  }
}
</script>
<style>
</style>

第三步 在routerTo.vue（接收参数的文件）文件中

<template>
  <div>
	<p>接收data参数{{this.data}}</p>
    <p>接收msg参数{{this.msg}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        data:'',
        msg:''
      }
    },
    created(){
      this.getRouterData()
    },
    methods:{
      getRouterData(){
        this.data=this.$route.query.data  //仅仅把params换成query
        this.msg=this.$route.query.msg
      }
    }
  }
</script>
<style>

</style>

注意

1.传递参数用$router
2.接受参数用$route
3.params必须和name配套使用，通过name来识别路径
4.query方法中仅仅是把params换成query，其他都不变