vue.js实现两个页面之间的通信

Question

用vue.js写的
页面A有个item列表，点击任何一个item前往该item的详情页面
详情页面的地址为 /item/id，id是每一个item的id。
我需要在详情页面获取到这个id的值。

我先是在详情页用 let id=location.href.split试图去截取地址栏中的id，这样做如果我直接访问详情页是ok的。但是我如果在页面A点击item来访问详情页的话就不行，因为点击过来的时候这里的href还是页面A不是详情页。

请问有什么合适的方法能实现我想要的效果呢？前端新手请大佬们指点一下，谢谢了。

不好意思不好意思我之前忘记说了不可用vue的动态路由，这个项目的路由是用的别的框架的。

Answer 1

使用vue-router的动态路由匹配，参考https://router.vuejs.org/zh-c...

用这种方式，定义路由，比如：

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

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/lists', component: List },
    { path: '/lists/:id', component: Detail }
  ]
})

然后在detail页面中，通过this.$route.params.id来获取id，不需要通过split去获取

Answer 2

你说的情况是没有做成spa吧？
spa直接使用vue vuex vue-router全家桶
多页面的话提供几个思路，复杂度从高到底：

• 服务端用node做后端渲染
• 使用后端路由，node、php等，然后如果没有seo需求，你在页面嵌入vue
• 跳转时在使用querystring，例如/item?id=1，还可以存在cookie和localstorage里，不过不推荐

Answer 3

可以使用vue-router传递参数

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

// 详情页
methods: {
    getId() {
        this.id = this.$route.params.id
    }
}