vue 传值方式

1、直接调用$router.push 实现携带参数的跳转

路由配置：写 /:id url上会显示参数值，不写/:id url上不会显示

{
      path: '/learn',
      name: 'learn',
      component: Learn,
      children: [{
     	  path: '/page/:id',  //子路由配置
     	  name:'page',
          component: Page,
          }
      ]
    }

一级页面

<template>
  <div class="learn">
    <h3>{{ msg }}</h3>
    <h3>我是learn页</h3>
    <a @click="getData">路由传值</a> 
    <router-view/>
  </div>
</template>

<script>
export default {
		  name: 'learn',
		  data () {
		    return {
		      msg: '我是指定跳转的地址router页面',		      
		    }
		  },
		  methods:{
		  
			getData(){
				//点击事件直接调用$router.push 实现携带参数的跳转
				this.$router.push({
			          name: 'page',
			          params: {
			            id: "1"
			          }
			        })
			
			}
		  
		  }
}
</script>

<style scoped>
 h3 {
  font-weight: normal;
  color: #42b983;
}

</style>

接受传参的页面　

<template>
  <div class="page">
    <h3>{{ msg }}</h3>
    <h3>我是page页面</h3>
    <a @click="getData">点我看值</a>
    <p>{{$route.params.id}}</p>
  </div>
</template>

<script>
export default {
		  name: 'page',
		  data () {
		    return {
		      msg: '我是嵌入的子页面'
		    }
		  },
		  methods:{
		  	getData(){
		  		//可以用js获取，也可以直接用{{}}显示在页面上
		  		console.log(this.$route.params.id) //1
		  	
		  	}
		  	
		  
		  }
}
</script>

<style scoped>
 h3 {
  font-weight: normal;
  color: #42b983;
}

</style>