Vue2：路由传递query参数的两种写法

一、情景说明

路由组件之间传递参数的效果实现

二、案例

1、传递参数

写法1：

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

写法2：

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:m.id,
		title:m.title
	}
}">
	{{m.title}}
</router-link>
1
2
3
4
5
6
7
8
9
10

2、接受参数

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