router
App.vue
user.vue
<template>
<div>
我是user
<div class="user-list">
<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>
</div>
<div class="user-info" v-if="userInfo.userName" style="font-size: 20px">
<p>姓名： {{userInfo.userName}}</p>
<p>性別： {{userInfo.sex}}</p>
<p>愛好： {{userInfo.hobby}}</p>
</div>
<hr>
<div v-if="userInfo.userName" class="info-list" style="font-size: 20px;">
<!-- 寫法二：obj形式 -->
<router-link exact :to="{path:'',query: {info:'follow'}}">他的關注</router-link>
<router-link exact :to="{path:'',query: {info:'share'}}">他的分享</router-link>
<!-- 寫法一：to形式 -->
<!-- <router-link exact to="?info=follow">他的關注</router-link>
<router-link exact to="?info=share">他的分享</router-link> -->
<div>
{{$route.query}}
</div>
</div>
</div>
</template>
<script>
let data = [
{
id:1,
tip:'vip',
userName:"leo1",
sex:'男',
hobby:'寫代碼'
},
{
id:2,
tip:'vip',
userName:"leo2",
sex:'男',
hobby:'唱歌'
},
{
id:3,
tip:'common',
userName:"leo3",
sex:'男',
hobby:'讀書'
}
]
export default {
data(){
return {
userList: data,
userInfo: {}
}
},
watch:{
$route(){
// 路徑發生變化，$route會重新賦值，監控了這個屬性，會執行這個函數
this.getData()
}
},
created(){
debugger;
// 渲染這個組件會調用一次這個生命週期函數
// 複用這個組件，這個函數不會再次被調用了
// 地址一旦發生變化，$route會重新生成一個路由信息對象
this.getData()
},
methods:{
getData(){
debugger;
let id = this.$route.params.userId;
if( id ){
this.userInfo = this.userList.filter((item)=>{
return item.id == id
})[0]
}else{
this.userInfo = {};
}
}
}
}
</script>
<style>
</style>
效果
