vue 路由传参

一、使用 router-link 路由导航

父组件： <router-link to= "/跳转路径/传入的参数"></router-link>
子组件： this.$route.params.num 接收父组件传入的参数

举例：
父： <router-link to="/a/123"></router-link>
子： mounted(){
		this.num = this.$route.params.num
	}
	
路由配置： { path:'/a/:num', name:'A', component: A }

地址栏中显示： http://localhost:8080/#/a/123

二、通过 query 传递参数

父组件： <button @click="deliverQr()">query传参</button>
		methods: {
			deliverQr(){
		      this.$router.push({ 
		      	path : 'B', 
		      	query: { text: '这是query传递的信息' } 
		      })
		    }
		 }
子组件： <div>父组件传入的参数：{{ this.$route.query.text }}</div> 

路由配置：不需要做修改
{ path:'/b', name: 'B', component: B }

地址栏中显示： 
http://localhost:8080/#/b?text=这是query传递的信息

三、通过 $router.push 传递参数

父组件： <button @click="deliverParam(123)">push传参</button>
		methods: {
			deliverParam(id){
		      this.$router.push({ path : `/c/${id}` })
		    }
		}
子组件： this.$route.params.id 接收父组件传过来的参数
		mounted(){
			this.id = this.$route.params.id
		}
路由配置： { path:'/c/:id', name: 'C', component: C }

地址栏中的显示： http://localhost:8080/#/c/123	

四、通过路由name属性匹配路由 + params传递参数

父组件： <button @click="deliverMsg()">params传参</button>
		methods: {
			deliverMsg(){
		      this.$router.push({ 
		      	name : 'D', 
		      	params: { msg: '这是一条信息' } 
		      })
		    }
		 }
子组件： <div>接收父组件传的参数：{{ this.$route.params.msg }}</div> 

路由配置： 路径后不需要加传递的参数，但是name要和父组件的nam一致，
{ path:'/d', name: 'D', component: D }

地址栏中的显示： 地址中不会带传入的参数，且页面再次刷新参数会丢失
http://localhost:8080/#/d