vue路由query字符串传参

责编:menVScode 2017-12-05 16:30 阅读(1119)

方式一:to="?info=follow"

<template>
  <div>
    我是user
    <hr>
    <div>
      <router-link :to='"/user/"+item.tip+"/"+item.id' key='index' v-for="item,index in userList" style="display:inline-block;padding:0 10px;margin:0 5px;">{{item.userName}}</router-link>
    </div>
    <dl style="line-height:26px;" v-if="userInfo.userName">
      <dd>姓名:{{userInfo.userName}}</dd>
      <dd>性别:{{userInfo.sex}}</dd>
      <dd>职位:{{userInfo.position}}</dd>
    </dl>
    <hr>
    <div v-if="userInfo.userName">
      <router-link exact to="?info=follow">{{userInfo.userName}}的关注</router-link>
      <router-link exact to="?info=share">{{userInfo.userName}}的分享</router-link>
    </div>
  </div>
</template>
<script>
  var data = [
        {id:1,tip:'vip',userName:"小明",sex:'男',position:'老师'},
        {id:2,tip:'vip',userName:"小红",sex:'女',position:'演员'},
        {id:3,tip:'common',userName:"小刚",sex:'男',position:'学生'}]
  export default {
    data(){
      return {
          userList: data,
          userInfo:{}
      }
    },
    watch:{
      $route(){//监控$route
        // console.log('监控$route:'+this.$route.params.userId)
        // 路径发生变化,$route会重新赋值,监控了这个属性,会执行这个函数
        this.getData()
      }
    },
    created(){
      // 渲染这个组件会调用一次这个生命周期函数
      // 复用这个组件,这个函数不会再次被调用了
      // 地址一旦发生变化,$route会重新生成一个路由信息对象
      this.getData()
    },
    methods:{
      getData(){
        let id = this.$route.params.userId
        if(id){
          this.userInfo = this.userList.filter((item)=>{
            return id==item.id
          })[0]
        }else{
          this.userInfo = {}
        }
      }
    }
  }
</script>

方式二::to="{path:'',query:{info:'follow'}}

<template>
  <div>
    我是user
    <hr>
    <div>
      <router-link :to='"/user/"+item.tip+"/"+item.id' key='index' v-for="item,index in userList" style="display:inline-block;padding:0 10px;margin:0 5px;">{{item.userName}}</router-link>
    </div>
    <dl style="line-height:26px;" v-if="userInfo.userName">
      <dd>姓名:{{userInfo.userName}}</dd>
      <dd>性别:{{userInfo.sex}}</dd>
      <dd>职位:{{userInfo.position}}</dd>
    </dl>
    <hr>
    <div v-if="userInfo.userName">
      <router-link exact :to="{path:'',query:{info:'follow'}}">{{userInfo.userName}}的关注</router-link>
      <router-link exact :to="{path:'',query:{info:'share'}}">{{userInfo.userName}}的分享</router-link>
    </div>
  </div>
</template>

获取query参数

$route.query

焦点处理

<template>
  <div>
    我是user
    <hr>
    <div>
      <router-link :to='{path:"/user/"+item.tip+"/"+item.id,query:{info:"follow"}}' key='index' v-for="item,index in userList" style="display:inline-block;padding:0 10px;margin:0 5px;">{{item.userName}}</router-link>
    </div>
    <dl style="line-height:26px;" v-if="userInfo.userName">
      <dd>姓名:{{userInfo.userName}}</dd>
      <dd>性别:{{userInfo.sex}}</dd>
      <dd>职位:{{userInfo.position}}</dd>
    </dl>
    <hr>
    <div v-if="userInfo.userName">
      <router-link exact :to="{path:'',query:{info:'follow'}}">{{userInfo.userName}}的关注</router-link>
      <router-link exact :to="{path:'',query:{info:'share'}}">{{userInfo.userName}}的分享</router-link>
      <div>
        {{$route.query}}
      </div>
    </div>
  </div>
</template>
标签: query vue 路由
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码