仿大众点评——Vue Router动态路由匹配（动态路径参数和watch $route 对象）

动态路径参数

在 vue-router 的路由路径中使用“动态路径参数”

export default new Router({
   {
     routes:[
            path:'/guessLikeDetails/:index',
            component:guessLikeDetails
           ]
    },
})

通过 $router 访问路由实例

@click="$router.push(`/guessLikeDetails/${key}`)"

watch监听$route 对象

在当前路由改变，但是该组件被复用时调用。
在我写的仿大众点评项目中，会出现guessLikeDetails/0和guessLikeDetails /1。
当用户从guessLikeDetails/0返回到home，再进入guessLikeDetails/1时，数据仍然是guessLikeDetails/0的数据。
因此组件实例是会被复用的，这个时候可以使用watc监听$router对象来重获数据。

  watch: {
    $route(to, from) {
      if (to.path == "/home") {
      } else {
        this.dianpuIndex = this.$router.currentRoute.params.index;
        this.dianpu = this.$store.state.dianpu.dianpu[this.dianpuIndex];
      }
    }
  },

附上页面图