vue js组件不会在同一页面上重新呈现

Question

我有一个组件

<template>somecode</template>
<script>
 export default {
        name: 'Card',
        created() {
                axios.get(apiObjUrl)
                      somecode
                })
     }
</script>

这是我的网址： http://127.0.0.1:8080/#/card/12

但我有一个问题：

当我像这样使用路由器链接时：

<router-link to="/card/155"> card 155</router-link>

我的网址更改：http://127.0.0.1:8080/#/card/155

但created() 方法不会被触发。 所以我不会向 api 提出新的 xhr 请求 数据不变 我该怎么办？

Answer 1

作为替代方案，您可以像这样在<router-view> 上设置key 属性：

    <router-view :key="$route.fullPath"></router-view>

由于<router-view> 本身就是一个组件，唯一的键会强制替换组件而不是重用它。所以你可以利用生命周期钩子。

见fiddle

Answer 2

那只是因为你的组件已经创建好了。您可以尝试使用生命周期挂钩 updated() 而不是 created()。

 export default {
   name: 'Card',
   updated() {
     axios.get(apiObjUrl)
     somecode
   })
 }

注意：这仅在您的 DOM 更改时才有效。如果你只是想监听 url 的变化并相应地更新你最好$watch你的路线像这样。

export default {
  name: 'Card',
  created() {
    axios.get(apiObjUrl)
    somecode
  }),
    watch: {
    '$route': function() {
        // do your stuff here
    }
    }
}