vue 2.0 路由设置问题

 

 代码设置路由

 

这里组件 我建立了 两个 一个是Books.vue 一个是 Book.vue

 

 这里 代码 created 我如果 只写 这些 只能获取到第一次 用户点击的id 所以不能这么写 我需要监控用户每次点击 连接 传递后的id 

所以需要 些 $watch 监控顶级实例  this.$route.params 变化

 

 

代码

<template>
  <div>
    <p>id:{{ book.id }}</p>
    <p>title:{{ book.title }}</p>
    <p>price:{{ book.price }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      books: [
        { id: '1', title: '红楼梦', price: 11 },
        { id: '2', title: '西游记', price: 12 }
      ],
      book: { id: 0, title: '', price: 0 }
    }
  },
  created() {
    // const id = this.$route.params.id
    // console.log(id
    // )
    // this.book = this.books.find(function (item) {
    //   return item.id === id
    // })

    this.$watch(
      () => this.$route.params,
      (toParams) => {
        this.book = this.books.find((item) => item.id === toParams.id);
      },
      {
        immediate: true
      }
    )
  }
}
</script>
<style lang="less" scoped></style>

测试结果 切换点击 书籍 没有问题