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}}