vue2路由 传参之query

query传参

1.传递参数

跳转并携带query参数 to的字符串写法

    <router-link
        :to="`/search/home/zhanshi?  id=${item.id}&title=${item.title}`"     
      >{{ item.title }}</router-link
 >

跳转并携带query参数 to的对象写法

       <router-link
          :to="{
            path: '/search/home/zhanshi',
            query: {
              id: item.id,
              title: item.title,
            },
          }"
          >{{ item.title }}</router-link
 > 

2.接收参数 （$route.query.参数名）

<script>
export default {
mounted(){
  console.log(this.$route);
   }，
}
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/7b13372a3e104e3d97fe3efc089baf17.png