在vue中路由传参

vue-router传递参数分为两大类

• 编程式的导航 router.push
• 声明式的导航 <router-link>

一.编程式导航传参方法：

  1.query方式：

必须定义path属性来控制跳转的路由，通过query来传参，用this.$route.query在接收参数页面接收参数。

特点：

• 参数会暴露在url地址中；

• 刷新页面数据不会丢失
• 只能传字符串，如果不是字符串，会自动转换为字符串，在进行传递

传递参数页面代码

<template>
	<div>
		<!-- 路由传参练习 -->
		<div>
			<p>我是参数：arg</p>
			<button @click="go()">跳转按钮</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return{
			}
		},
		methods:{
			//模块化封装后使用方法
			go(){
				this.$router.push({
					path:"/get_arg",
					query:{
						id:"参数：arg"
					}
				})
			}
		},
		created(){}
	}
</script>
<style>
</style>

接收参数页面代码

<template>
	<div>
		{{this.$route.query.id}}
	</div>
</template>
<script>
	export default {
		data() {
			return{}
		},
		methods:{},
		created(){
		}
	}
</script>
<style>
</style>

2.params方式：

必须定义name属性来控制跳转的路由，通过params来传参，用this.$route.params在接收参数页面接收参数。

 特点：

• 参数不暴露在url地址中；

 

• 刷新页面数据会丢失
• 传递参数是什么类型就是什么类型

 传递参数页面代码

<template>
	<div>
		<!-- 路由传参练习 -->
		<div>
			<p>我是参数：arg</p>
			<button @click="go()">跳转按钮</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return{
			}
		},
		methods:{
			go(){
				this.$router.push({
					name:"Get_arg",
					params:{
						id:"参数：arg"
					}
				})
			}
		},
		created(){}
	}
</script>
<style>
</style>

配置路由页面

{
    path: '/get_arg',
    name: 'Get_arg',
    component: () => import('../views/get_arg.vue')
  }

接收参数页面代码

<template>
	<div>
		{{this.$route.params.id}}
	</div>
</template>
<script>
	export default {
		data() {
			return{}
		},
		methods:{},
		created(){
		}
	}
</script>
<style>
</style>

二.声明式的导航传参方法：

1.params方式：

 传递参数页面代码

<router-link :to="{name:'Get_arg',params:{id:'参数：arg'}}">跳转按钮</router-link>

//router-link设置样式时相当于a标签

接收参数页面代码

<template>
	<div>
		{{this.$route.params.id}}
	</div>
</template>
<script>
	export default {
		data() {
			return{}
		},
		methods:{},
		created(){
		}
	}
</script>
<style>
</style>

  2.query方式：

 传递参数页面代码

<router-link :to="{path:'/get_arg',query:{id:'参数：arg'}}">跳转按钮</router-link>

接收参数页面代码

<template>
	<div>
		{{this.$route.query.id}}
	</div>
</template>
<script>
	export default {
		data() {
			return{}
		},
		methods:{},
		created(){
		}
	}
</script>
<style>
</style>

3.地址拼接方式：

 传递参数页面代码

<router-link to="/get_arg/参数：id">跳转按钮</router-link>

接收参数页面代码

<template>
	<div>
		{{this.$route.params.id}}
	</div>
</template>
<script>
	export default {
		data() {
			return{}
		},
		methods:{},
		created(){
		}
	}
</script>
<style>
</style>

配置路由页面

 {
    path: '/get_arg/:id',
    name: 'Get_arg',
    component: () => import('../views/get_arg.vue')
  }

特别注意： 

发送时是this.$router.push()

接收时是this.$route