动态路由原来还有这个坑！

踩坑

动态路由参数变化时，由于我们共用一个组件，虽然数据变化了，但是并不会重新去获得数据，于是当我们通过鼠标点击（手动输入地址不会出现这种情况）时，就会发现，路由切换了，但是拿不到切换后的路由的数据。

---route.js---
const routes=[
    {path:'/',
     component:Home
    },
    {path:/user/:id,
     component:User
    }
]

const router=new VueRouter({
    routes
})

export default router

---User.vue---
<template>
    <div>当前用户id:{{id}}</div>
</template>

<script>
export default {
    data(){
        return {
          id:this.$route.params.id
        }
    },
    created(){
      console.log('created')
    }
}
</script>

如果是使用上面的方法，那么结果如下图：

点了用户1，再点击用户2，发现当前用户的id依旧为1，这个时候打开控制台，发现created钩子函数只调用了一次，也就是说，组件并不会重新创建，数据也不会拿到最新的。

填坑方法

数据更新了，但是组件并没有更新，那么我们就可以监听数据变化，然后让组件进行数据的更新。

使用watch

---User.vue---
<template>
    <div>当前用户id:{{id}}</div>
</template>

<script>
export default {
    data(){
        return {
          id:this.$route.params.id
        }
    },
    watch:{
        $route(to,from){
            this.id=to.params.id
        }
    }
}
</script>

使用beforeRouteUpdate

---User.vue---
<template>
    <div>当前用户id:{{id}}</div>
</template>

<script>
export default {
    data(){
        return {
          id:this.$route.params.id
        }
    },
    beforeRouteUpdate(to,from){
        this.id=to.params.id
    }
}
</script>

以上就是使用动态路由会遇到的坑。