Почему vue-router не меняет данные в компоненте?

Question

[Евгений Журов]

Здравствуйте. В приложении есть хэдер с навигацией, допустим, такого рода:

<nav>
<router-link
				tag="a"
				:to="{ name: item.name, params: { slug: item.slug }}"
			>
				{{ item.text }}
			</router-link>
</nav>

items по которому проходится v-for выглядит так:

[
{
            name: 'InnerTable',
            slug: 'data-1',
            text: 'Link 1',
          },
{
            name: 'InnerTable',
            slug: 'data-2',
            text: 'Link 2',
          }
]

route для пунктов этого меню выглядит так:

{
    path: '/:slug',
    name: 'InnerTable',
    component: AppInnerTable,
    props: true
  }

То есть нужно использовать один и тот же компонент для вывода разных данных, в зависимости от роутинга. Например, два элемента в массиве, соответственно - две ссылки в меню, каждая из которых должна вести на один и тот же компонент, но наполнять его разными данными, т.е. при переходе по ссылке заново скачивать json с данными и перерендеривать компонент

В компоненте, на который указывает роутинг я получаю данные посредством axios:

created: function() {
		let data_slug = this.$route.params.slug

		Axios.get(`/data/${data_slug}.json`)
			.then(res => {
				this.table_data = res.data
			})
			.catch(error => {
				console.log(error)
			})
	}

И дальше эти данные монтируются к приложению.

Так вот вся эта история срабатывает как бы один раз. Если я с главной страницы перехожу по ссылке - то все норм. Но если находясь на этой "внутренней" странице я кликаю по другой ссылке - то url в адресной строке меняется, но больше ничего не происходит. Ошибок в консоли нет. При этом, если перезагрузить страницу с обновленным url, то рендерятся правильные данные. Что я делаю не так и как исправить?

Более наглядно

Просьба не кидаться просто ссылками на документацию. Либо кидаться, но с пояснением, т.к. я не увидел в документации решения, либо, возможно, просто не понял.

Answer 1

[0xD34F]

Потому что экземпляр компонента заново не создаётся при смене значений параметров. За ними надо следить:

watch: {
  '$route.params.slug': {
    immediate: true,
    handler() {
      // сюда переносите код из created
    },
  },
},

Comments

[Евгений Журов]

Спасибо!