学习记录502@vue路由传参之query参数

最新推荐文章于 2024-05-10 18:48:39 发布

教练我想学编程

最新推荐文章于 2024-05-10 18:48:39 发布

阅读量246

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44663675/article/details/121777986

版权

本文详细讲解了Vue应用中通过`router-link`组件传递参数的两种方式，对象写法的高效性和字符串写法的区别。同时介绍了在`mounted`钩子中接收和处理这些参数的方法。适合理解前后端协同开发的读者。

摘要由CSDN通过智能技术生成

传参的两种写法

推荐使用对象写法

<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带query参数，to的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

				<!-- 跳转路由并携带query参数，to的对象写法 -->
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>

接收参数

<template>
	<ul>
		<li>消息编号：{{$route.query.id}}</li>
		<li>消息标题：{{$route.query.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		mounted() {
			console.log(this.$route)
		},
	}
</script>