javascript - VUE2.0 切換詳情頁數(shù)據(jù)
問題描述
列表頁點(diǎn)擊到詳情可以正常根據(jù)id切換詳情內(nèi)容列表頁:click函數(shù)添加 this.$router.push({ name: ’detail’, params: { id: id }});詳情接收傳遞過來的id this.$route.params.id,
列表頁右欄做了個(gè)導(dǎo)航(熱門文章),點(diǎn)擊熱門文章切換詳情內(nèi)容問題是:地址欄:xx/detail/id可以正常傳遞,詳情內(nèi)容沒變化正常hash有變化就應(yīng)該更改對(duì)應(yīng)的詳情數(shù)據(jù),熱門文章點(diǎn)擊,雖然hash變了,詳情頁面只加載了一次哪位vue大神可以給講下原因啊
具體三個(gè)頁面的代碼: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 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 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;
問題解答
回答1:初步估計(jì)問題出在detail.vue組件中。你的detail.vue的listId項(xiàng)的賦值出現(xiàn)了問題,嘗試這樣試一下:
export default { data () {return { listId: ’’} },mounted () {// 1.組件初步加載時(shí)賦值一次this.listId = this.$route.params.id; },watch: {’$route’: function () { //2. $route發(fā)生變化時(shí)再次賦值listId this.listId = this.$route.params.id;} }}
這樣組件初次加載的時(shí)候可以保證拿到正確的路由參數(shù),在路由發(fā)生變化的時(shí)候也可以正確的拿到路由參數(shù)。
相關(guān)文章:
1. Python從URL中提取域名2. 實(shí)現(xiàn)bing搜索工具urlAPI提交3. node.js - windows10下的npm全局路徑的復(fù)原或者將npm徹底刪除?4. python執(zhí)行cmd命令,怎么讓他執(zhí)行類似Ctrl+C效果將其結(jié)束命令?5. python - scrapy url去重6. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)7. mysql在限制條件下篩選某列數(shù)據(jù)相同的值8. 關(guān)于mysql聯(lián)合查詢一對(duì)多的顯示結(jié)果問題9. 數(shù)據(jù)庫 - Mysql的存儲(chǔ)過程真的是個(gè)坑!求助下面的存儲(chǔ)過程哪里錯(cuò)啦,實(shí)在是找不到哪里的問題了。10. python - Django有哪些成功項(xiàng)目?
