Здравствуйте. В приложении есть хэдер с навигацией, допустим, такого рода:
<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, то рендерятся правильные данные. Что я делаю не так и как исправить?
Более наглядно
Просьба не кидаться просто ссылками на документацию. Либо кидаться, но с пояснением, т.к. я не увидел в документации решения, либо, возможно, просто не понял.
