在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue.js實(shí)現(xiàn)兩個(gè)頁面之間的通信

vue.js實(shí)現(xiàn)兩個(gè)頁面之間的通信

用vue.js寫的
頁面A有個(gè)item列表,點(diǎn)擊任何一個(gè)item前往該item的詳情頁面
詳情頁面的地址為 /item/id,id是每一個(gè)item的id。
我需要在詳情頁面獲取到這個(gè)id的值。

我先是在詳情頁用 let id=location.href.split試圖去截取地址欄中的id,這樣做如果我直接訪問詳情頁是ok的。但是我如果在頁面A點(diǎn)擊item來訪問詳情頁的話就不行,因?yàn)辄c(diǎn)擊過來的時(shí)候這里的href還是頁面A不是詳情頁。

請問有什么合適的方法能實(shí)現(xiàn)我想要的效果呢?前端新手請大佬們指點(diǎn)一下,謝謝了。

不好意思不好意思我之前忘記說了不可用vue的動(dòng)態(tài)路由,這個(gè)項(xiàng)目的路由是用的別的框架的。

回答
編輯回答
夏夕

你說的情況是沒有做成spa吧?
spa直接使用vue vuex vue-router全家桶
多頁面的話提供幾個(gè)思路,復(fù)雜度從高到底:

  • 服務(wù)端用node做后端渲染
  • 使用后端路由,node、php等,然后如果沒有seo需求,你在頁面嵌入vue
  • 跳轉(zhuǎn)時(shí)在使用querystring,例如/item?id=1,還可以存在cookie和localstorage里,不過不推薦
2017年12月31日 16:23
編輯回答
替身

使用vue-router的動(dòng)態(tài)路由匹配,參考https://router.vuejs.org/zh-c...

用這種方式,定義路由,比如:

const List = {
  template: '<div>List</div>'
}
const Detail = {
  template: '<div>Detail</div>'
}

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭
    { path: '/lists', component: List },
    { path: '/lists/:id', component: Detail }
  ]
})

然后在detail頁面中,通過this.$route.params.id來獲取id,不需要通過split去獲取

2017年4月15日 16:43
編輯回答
詆毀你

可以使用vue-router傳遞參數(shù)

// 頁面A
methods: {
    toDetail() {
        this.$router.push({
            path: 'xxx',
            params: { id: xxx }
        })
    }
}

// 詳情頁
methods: {
    getId() {
        this.id = this.$route.params.id
    }
}
2018年2月5日 15:00