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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容