Vue-router зачем-то перезагружает страницу по динамическому пути?

Question

[tuxx]

Настройка роутера простейшая:

const router = new VueRouter({
	mode: 'history',
	routes: [
		{
			path: '/',
			component: Home
		},
		{
			path: '/item/:id',
			component: ItemDetail
		},
		{
			path: '/profile/',
			component: Profile
		}
	]
})

В /profile/ переходит нормально, а в /item/1234 только с полной перезагрузкой страницы браузера.

Comments

[lavezzi1]

Покажите ссылку на динамический урл

[tuxx]

lavezzi1, шаблон пути:
/item/:id
полный путь в данный момент выглядит, например, так
http://localhost:8080/item/11779444986
т.к. использую vue-cli

[lavezzi1]

tuxx,

<router-link tag="a" :to="`/item/${id}`"></router-link>

[tuxx]

lavezzi1, у меня router-view рендерит одностраничный компонент Home.vue, в котором в шаблоне рендерится через v-for компонент ItemPreview.vue

<ItemPreview v-for="item in items" :key="item.itemid" :item="item"></ItemPreview>

Answer 1

[Илья Герасимов]

Где-то ошибка, поэтому перестают работать js скрипты и поэтому вместо отлова события клика на ссылку, срабатывает простой переход как в случае с откл. js-скриптом, смотрите консоль

Comments

[tuxx]

смотрел. там только ошибка '[WDS] Disconnected!' от webpack, т.к. сейчас код запущен через webpack-dev-server

[Илья Герасимов]

tuxx, именно в момент клика или после того как страница обновилась?)
я уверен в том, что у вас в компоненте ItemDetail на стадии mount'a есть ошибки из-за которых происходит простой переход

[tuxx]

Илья Герасимов, именно в момент клика выходит disconnected
ItemDetail - одностраничный компонент. я изменил его до состояния:

<script>
   export default {
   }
</script>

<template>
	<div class="detail">
	
	</div>
</template>

но все так же

[Илья Герасимов]

tuxx, тогда стоит смотреть причины дисконнекта, точнее не скажу =(

Answer 2

[twan]

Необходимо ваш компонент ItemDetail импортировать в App.vue