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

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

<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, то рендерятся правильные данные. Что я делаю не так и как исправить?

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

Просьба не кидаться просто ссылками на документацию. Либо кидаться, но с пояснением, т.к. я не увидел в документации решения, либо, возможно, просто не понял.
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Потому что экземпляр компонента заново не создаётся при смене значений параметров. За ними надо следить:

watch: {
  '$route.params.slug': {
    immediate: true,
    handler() {
      // сюда переносите код из created
    },
  },
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
11 дек. 2019, в 01:58
2500 руб./за проект
11 дек. 2019, в 01:57
1000 руб./в час
11 дек. 2019, в 00:13
600 руб./в час