vue js组件不会在同一页面上重新渲染

时间:2017-07-28 11:36:30

标签: vue.js

我有一个组件

<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请求 和数据不会改变 我该怎么办?

2 个答案:

答案 0 :(得分:2)

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

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

注意:这仅在您的DOM更改时才有效。如果您只想听取网址更改并相应更新,那么最好$watch这样的路线。

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

答案 1 :(得分:1)

作为替代方案,您可以在<router-view>上设置key属性,如下所示:

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

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

请参阅fiddle