router 信息的使用

1,动态路径

 

     设置动态路径  

      <router-link style="padding: 0px 20px;" :to="{path:'/user/'+item.tip+'/'+item.id,query:{info:'follow'}}" :key="index" v-for="item,index in userList">{{item.userName}}</router-link>
 
   监控路由信息  $route
 
  生命周期函数,加载一次,对象是列创建时候执行
 
   created () {
 
   this.getData ()
  }
 
   
methods:{
getData () {
let id = this.$route.params.userId
if (id) {
this.userInfo = this.userList.filter((item) => {
return item.id == id
})[0]
}else{
this.userInfo = {}
}
}
}
 
   页面上用wath 见监控路由信息变化,然后执行函数
watch:{
$route(){
this.getData ()
}
},
created () {
 
this.getData ()
}
 
 用query 进行字符串传参
 
<router-link exact :to="{path:'',query:{info:'follow'}}">他的关注</router-link>
<router-link exact :to="{path:'',query:{info:'share'}}">他的分享</router-link>
 
读取
  
{{$route.query}}
 
 
 
     
   
posted @ 2018-01-06 16:06  有二度  阅读(126)  评论(0编辑  收藏  举报