路由的query参数

作用：跳转的时候传递参数

使用方法

1.传递query参数

①第一种:

to的正常写法

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

    {{m.title}}
</router-link>

②第二种:

to的对象写法

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

2.用$route.query接收参数

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