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

Question

I have a component

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

this my url: http://127.0.0.1:8080/#/card/12

But I have a problem:

when I use router-link like this:

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

my url changes: http://127.0.0.1:8080/#/card/155

but the created() method doesn't get fired. so I don't make new xhr request to api and data not changes what do I do?

Answer 1

As an alternative you can setup a key attribute on your <router-view> like this:

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

As <router-view> is a component itself and unique keys force replacement of component instead of reusing it. So you can make use of life cycle hooks.

See the fiddle

Answer 2

That's just because your component is already created. You may try using the lifecycle hook updated() instead of created() .

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

Note: This will only work if your DOM changes. If you just want to listen on url changes and update accordingly you better $watch your route like this.

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