Каким образом можно обновить компонент router-view при переходе на другую страницу в Vue 3?

  • 30 августа 2023 г. 15:36
Ответы на вопрос 2
В Vue 3 для обновления компонента `router-view` при переходе на другую страницу, можно использовать `watch` для отслеживания изменений текущего пути.

Пример решения вашей проблемы может выглядеть следующим образом:

1. Установите `vue-router`:
```bash
npm install vue-router
```

2. Создайте файл маршрутов `router.js`:
```js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('./components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('./components/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
```

3. В вашем основном файле `main.js` подключите `vue-router` и настройте маршруты:
```js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');
```

4. В вашем компоненте с пагинацией, добавьте `watch` для перехода на страницу при изменении текущего пути:
```js
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    watch(
      () => router.currentRoute.value.path,
      () => {
        // Выполняйте нужное действие при переходе на другую страницу
      },
    );

    return {};
  },
};
```

После выполнения этих шагов, компонент `router-view` будет автоматически обновляться при переходе на другую страницу. В методе `watch` вы можете определить нужное вам действие, которое должно выполняться при переходе на другую страницу.
После изучения JavaScript я вспомнил о событиях и использовал их для отслеживания клика на кнопках пагинации. Но мне потребовалось отслеживать событие в других компонентах. Я обратился к Vuex. Вот как выглядит мой код:

Файл store/index.js:
```
import { createStore } from 'vuex'

const store = createStore({
	state: {
		page: 1,
		maxpage: 1,
		newmenu: false,
		portfolio: [],
	},
	mutations: {
		INCREMENT_PAGE(state, payload) {
			state.page = payload;
			console.log(state.page);
		},
		INCREMENT_PORTFOLIO(state, payload) {
			state.portfolio = payload;
			console.log(state.portfolio);
		},
		INCREMENT_MAXPAGE(state, payload) {
			state.maxpage = payload;
			console.log(state.maxpage);
		},
	}
})

export default store;
```

Файл src/views/PortfolioViem.vue:
```



```

Файл src/components/Pagination.vue:
```





```

Файл src/components/PortfolioList.vue:
```





```

Мой код работает. Список обновляется без перезагрузки страницы при нажатии кнопок пагинации. Однако я бы хотел услышать ваше мнение, правильно ли я сделал и можно ли что-то улучшить в моем коде.
Похожие вопросы