router-link: query传参

• router-link传参有两种方式

  <router-link exact to="?info=follow">我的关注</router-link>
  

  <router-link exact :to="{path:'',query:{info:'follow'}}">我的关注</router-link>
  //  path为空字符表示当前的路由地址
  

image.png

• 当前页面功能点击后需要直接展示默认参数，就需要使用第二种传参方式

image.png

<template>
    <div>
        我是user
        <div class="user-list">
            <router-link style="padding: 0px 10px" :to="{path:'/user/' + item.tip + '/' + item.id,query:{info:'follow'}}" :key='index' v-for='(item,index) of userList'>{{ item.userName }}</router-link> 
        </div> 
        <div class="user-info" v-if="userInfo.userName" style="font-size: 14px;">
            <p>姓名：{{ userInfo.userName }}</p>
            <p>性别：{{ userInfo.sex }}</p>
            <p>爱好：{{ userInfo.hobby }}</p>  
        </div>
        <div class="user-list" v-if="userInfo.userName">
            <router-link exact :to="{path:'',query:{info:'follow'}}">我的关注</router-link>
            <router-link exact :to="{path:'',query:{info:'share'}}">我的分享</router-link>
        </div>
        <div v-if="userInfo.userName">
            {{ $route.query }}
        </div>
    </div>
</template>