vue路由传参

一.params

1.声明式params

声明式router-link：该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数
进行页面按钮式路由跳转

// 父组件
<router-link to="/child/LuFei">
	<el-button >click</el-button>
</router-link>

// 子组件
// 运用 this.$router.params 来接收路由参数
<template>
	<div class='child'>
		{{ name }}
	</div>
</tempalte>
<script>
export default {
	name: 'child',
	data(){
		name:''
	},
	mounted{
		this.name = this.$router.params.name
	}
}
</script>

// 路由配置文件
{
	path:'/child/:name',// : 代表动态变化，此处的name的值是可以变化的
	name:'child',
	component:Child
}

http://localhost:8089/#/child/LuFei

2.编程式params

编程式 this.$router.push：同样需要子路由提前配置好参数。

this.$router.push({
​	name:"child" // 注意不在路径中显示用name,不能用path
​	params:{
​		id:1
​	}
})

http://localhost:8089/#/child/1

二.query

直接传参,不需要在路由中配置参数,它的参数会在路由中显示出来
query 传递的参数会显示在 url 路径 ‘’?‘’ 的后面
参数显示在地址栏中，刷新页面参数不丢失

1.声明式query

// 传参
<router-link :to = "{name:'A' , query:{id:'我是query参数'}}"></router-link>
// 在组件中接参
<templent>
	<div>
    	我是A路由{{this.$route.query.id}}
    </div>
</templent>

// 路由配置文件
{
	path:'/child
	name:'child',
	component:Child
}

http://localhost:8089/#/child/?id=1

2.编程式query

this.$router.push({
	name:"child" // query传参在路径中体现,name用于配置别名
    query:{
    	id:1
    }
})

http://localhost:8089/#/child/?id=1