Dúvida sobre "created()"

Olá! Eu também esperava que o created fosse chamado, mas como você esta no mesmo endereço, ele é espertinho e parece não criar o componente novamente, pois você já esta nele.

Nesse sentido, já experimentou configurar a rota com redirect? No path das rotas, no lugar de definir o componente, cria uma rota que chamada outra rota

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

Quando você acessar a rota a, ela vai redirecionar para foo. Talvez isso force o recarregamento, dentro do contexto que você me passou.

Olá Flavio,

Bom, parece que ele é espertinho até demais, visto que mesmo assim o componente não é carregado. Vide como ficou o código:

import Exercise from './components/exercise/Exercise.vue';
import App from './App.vue';

export const routes = [
    { path: '/', name: 'home', component: App, titulo: 'home' },
    { path: '/bodypart/:id', name: 'listExercises', component: Exercise, titulo: 'Exercise', redirect:'/exercise/:id'},
    { path: '/exercise/:id', name: 'exercises', component: Exercise, titulo: 'Exercise'}
];

O redirect é feito corretamente e a URL é alterada perfeitamente, porém na tela permanece escrito os dados do link anterior. Será que existe algum recurso que coloco no routes e forço o componente a carregar novamente?

Como geralmente é feito em Vue.js quando possuo um dropdown-menu dentro de um navbar, e quero que haja navegação de um link para o outro do dropdown sem que haja carregamento? Eu geralmente uso o Created mesmo?

Desculpa o incômodo com tantas perguntas, mas é que realmente estou interessado em aprender este framework! rs

Obrigado!

Acho que eu não entendi o problema anterior depois da sua última pergunta. Você quer é alterar partes do seu componente de acordo com determinada rota sem ter que renderizar o componente todo novamente? É isso?

Assim, eu possuo um navbar com diversas opções, uma destas opções se chama "Partes do Corpo". Quando eu clico em partes do corpo, ele é um dropdown que trás várias partes do corpo (ex.: Braços, costas, abdômen, etc.). Diante disto, quando clico em alguma destas partes do corpo, ele muda para a URL "/bodypart/", e trás uma tela com os exercícios que, se eu fizer, afetam esta parte do corpo (ex.: se eu escolher abdômen, ele traria, por exemplo, abdominal, natação, etc.). O problema que tem acontecido é que quando eu clico em uma parte do corpo, ele trás todos exercícios desta parte do corpo sem problemas, porém quando, ainda estando nesta mesma URL, eu clico em outra parte do corpo no dropdown, ele muda a URL para /bodypart/, porém não muda a tela, pois o created não é executado novamente (o created é responsável por chamar o método da minha API que trás todos exercícios desta parte do corpo). A minha dúvida é, como eu poderia contornar esta situação mantendo as boas práticas?

Caso ainda tenha ficado um pouco confuso, não hesite em perguntar novamente, sem problemas!

Agora entendi. Já tentou por método? Porque se o componente já foi criado e não foi removido ele não chamará o created como você percebeu.

Toda vez que você entrar em algum componente ele é criado. Você pode fazer um teste colocando um console.log no created.

created () {
  // sua lógica
    console.log('component criado')
 }

Como o Flávio disse, se não haver o destroy não irá chamar o created.

Recomendo que você veja como funciona o ciclo de vida na documentação.

Pessoal,

Consegui resolver aqui, fiz da seguinte forma:

<script>
import BodyPartService from "../../services/BodyPartService";

export default {
  data() {
    return {
      exerciseList: "",
      errorMessage: ""
    };
  },

  created() {
    this.fetchData();
  },
  watch: {
    $route: "fetchData"
  },
  methods: {
    fetchData() {
      this.service = new BodyPartService(this.$resource);

      if (this.$route.params.id) {
        this.service
          .readById(this.$route.params.id)
          .then(
            exerciseList => (this.exerciseList = exerciseList),
            err => (this.errorMessage = err.message)
          );
      }
    }
  }
};
</script>

Valeu!