1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
| <template>
<div class="hello">
<h1>user</h1>
<!--路由中代表的链接为 http://localhost:8081/user/vip/1?info=follow (示例) -->
<router-link :to="{path:'/user/'+item.tip+'/'+item.id,query:{info:'follow'}}" :key="index" v-for="item,index in datalist"><span style="padding:20px;">{{item.name}}</span></router-link>
<div v-if="userinfo.id">
<p>用户名:{{userinfo.name}}</p>
<p>数量:{{userinfo.name}}</p>
<p></p>
<p></p>
</div>
<!-- 字符串传参(查询字符串) -->
<div v-if="userinfo.id">
<!-- exact写在需要匹配的路由中 意思为精确匹配 -->
<!-- 方法一 -->
<!--
<router-link exact to="?info=follow">我的关注</router-link>
<router-link exact to="?info=share">我的关注</router-link>
-->
<!-- 方法二 -->
<!---->
<router-link exact :to="{path:'',query:{info:'follow'}}">我的关注</router-link>
<router-link exact :to="{path:'',query:{info:'share',a:1}}">我的关注</router-link>
{{$route.query}}
</div>
</div>
<!--
这个时候,我们会发现一个问题,就是当我们点击用户之后,用户的信息是没有显示的,
需要刷新才能显示,这是因为,我们操作的是同一个组件,当我们进入这个组件之后,
组件加载已经完成了,当我们点击用户的时候,就还是这个页面,没有触发视图更新,
这个时候我们就需要监控路由,路由变化触发视图更新
-->
</template>
<script type="text/javascript">
let data=[
{
id:1,
tip:"vip",
name:'张三',
number:100
},
{
id:2,
tip:"vip",
name:'张4',
number:10
},
{
id:3,
tip:"common",
name:'张5',
number:23
}
];
export default({
data(){
return {
datalist:data,
userinfo:{
}
}
},
watch:{
$route(){
//路径发生变化,$route会重新赋值,监控了这个属性,会执行这个函数
this.getData();
}
},
created(){
//渲染这个组件会调用一次这个生命周期函数
//复用这个组件,这个函数不会再次被调用了
//地址一旦发生变化,$route会重新生成一个路由信息对象
this.getData();
},
methods:{
getData(){
console.log(this.$route);
let id = this.$route.params.userid;
if(id){
this.userinfo = this.datalist.filter((item)=>{
return item.id ==id;
})[0];
console.log(this.userinfo);
}else{
this.userinfo={};
}
}
}
})
</script> |
共 0 条评论关于"vue-cli(Vue-Router)query字符串传参"
最新评论