列表頁點擊到詳情可以正常根據id切換詳情內容
列表頁:click函數添加this.$router.push({ name: 'detail', params: { id: id }});
詳情接收傳遞過來的id this.$route.params.id,
清單頁右欄做了個導覽(熱門文章),點選熱門文章切換詳情內容
問題是:網址列:xx/detail/id可以正常傳遞,詳情內容沒變化
正常hash有變化就應該更改對應的詳情數據,熱門文章點擊,雖然hash變了,詳情頁面只加載了一次
哪位vue大神可以給講下原因啊
具體三個頁面的程式碼:
APP.vue
<template>
<p id="app">
<router-view></router-view>
</p>
<aside>
<hotList></hotList>
</aside>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import artList from './components/artList.vue'
import hotList from './components/hotList.vue'
export default {
name:'app',
components: {
hotList,
artList
}
}
</script>
hotList.vm ,,hotList.vm和artList.vm的程式碼邏輯一樣的
<template>
<p id="hotlist" class="hotlist">
<ul>
<li v-for="(item,index) in items" @click="goDetail(item.id)">
{{ item.title }}
</li>
</ul>
</p>
</template>
<script type="text/ecmascript-6">
export default {
name:'hotlist',
data () {
return {
items: null,
}
},
mounted: function(){
this.$http.get('/api/list').then( function (response) {
this.items = response.data
}, function(error) {
console.log(error)
})
},
methods:{
goDetail(id){
this.$router.push({ name: 'detail', params: { id: id }});
},
}
}
</script>
detail.vue
<template>
<p id="detail" class="detail">
<h2>{{detail.title}}</h2>
<p>{{ detail.description }}</p>
</p>
</template>
<script type="text/ecmascript-6">
export default {
name:'detail',
data () {
return {
listId: this.$route.params.id,
detail: {},
}
},
mounted: function(){
this.getDetail();
},
methods: {
getDetail(){
this.$http.get('/api/list/' + this.listId)
.then(function (res) {
this.detail = res.data.id ? res.data : JSON.parse(res.request.response);
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
}
}
</script>
路由:
import artListfrom '../components/artList.vue'
import detail from '../components/detail.vue'
const router = new VueRouter({
routes:[
{
path:'/home',
name: 'home',
component: artList,
},
{
path: '/home/artList/detail/:id',
name: 'detail',
component: detail,
}
]
});
export default router;
初步估計問題出在detail.vue組件。你的detail.vue的listId項目的賦值出現了問題,試試這樣試試看:
這樣元件初次載入的時候可以確保拿到正確的路由參數,在路由發生變化的時候也可以正確的拿到路由參數。