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

В 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:
```
<template>
	<section class="portfolio_section bg0 bg1 ">
		<div class="portfolio_page">
			<div class="portfolio_items">
				<PortFolioList :page='this.$store.state.page' />
			</div>
			<div class="portfolio_seadbar">
			</div>
		</div>
		{{ my }}
		<Pagination :max_num_pages='portfolio.max_num_pages' :pages='this.$store.state.page' />
	</section>
</template>

<script>
function pereborpage(no) {
	var hop = 0;
	if (no == 0 || no == null) {
		hop = 1;
	} else {
		hop = no;
	}
	return hop;
}
import HeiderPortfoli from '@/components/HeiderPortfoli.vue';
import PortFolioList from '@/components/PortfolioList.vue';
import Pagination from '@/components/Pagination.vue';
export default {
	name: 'ServicesV',
	components: {
		HeiderPortfoli,
		PortFolioList,
		Pagination
	},
	data() {
		return {
			portfolio: [],
			my: [],
			cms: [],
			n: 0,
			page: 1,
		};
	},
	async mounted() {
		console.log(this.$store.state.page)
		const lrt = this.$route.params.page;
		const ThisPage = pereborpage(lrt);
		this.$store.commit('INCREMENT_PAGE', ThisPage);
		console.log(this.$route);
		console.log(lrt);
		console.log(ThisPage);
		this.page = ThisPage;
		const my_servecj = await fetch('API/my_servec/');
		const cms_servesj = await fetch('API/cms_serves/');
		const my_servecq = await my_servecj.json();
		const cms_servesq = await cms_servesj.json();
		this.my = my_servecq;
		this.cms = cms_servesq;
	}
}
</script>
```

Файл src/components/Pagination.vue:
```
<template>
	<div v-if="this.$store.state.maxpage != 0 || this.$store.state.maxpage != null">
		<ul class="pagination">
			<template v-for="n in this.$store.state.maxpage" :key="n">
				<template v-if="n == page">
					<span class="active">{{ n }}</span>
				</template>
				<template v-else>
					<router-link @:click="perexod(n)" :to="{ name: 'portfolio', params: { page: n } }">{{ n }}</router-link>
				</template>
			</template>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'PaginationV',
	data() {
		return {
			n: 0,
			page: 1,
			portfolioj: [],
		}
	},
	props: {
		max_num_pages: Number,
		pages: Number,
	},
	methods: {
		async perexod(pag) {
			//console.log(pag);
			this.page = pag;
			this.$store.commit('INCREMENT_PAGE', pag);
			const portfolioj = await fetch(`api/?page=${this.$store.state.page}`);
			const portfolioq = await portfolioj.json();
			this.$store.commit('INCREMENT_PORTFOLIO', portfolioq.post);
			this.$store.commit('INCREMENT_MAXPAGE', portfolioq.max_num_pages);
			//console.log(this.page);
			console.log(this.$store.state.page);
		}
	},
}
</script>

<style scoped></style>
```

Файл src/components/PortfolioList.vue:
```
<template>
	<template v-for="item  in  this.$store.state.portfolio " :key="item.ID">
		<CardPortfolio :url="item.post_name" :img="item.img" :title="item.post_title" :content="item.post_content"
			:color="item.color" />
	</template>
</template>

<script>
import CardPortfolio from '@/components/CardPortfolio.vue';
export default {
	name: 'PortFolioList',
	props: {
		type: Number,
		page: Number,
	},
	components: {
		CardPortfolio
	},
	data() {
		return {
			portfolio: [],
		};
	},
	async mounted() {
		const portfolioj = await fetch(`api/?page=${this.$store.state.page}`);
		const portfolioq = await portfolioj.json();
		this.$store.commit('INCREMENT_PORTFOLIO', portfolioq.post);
		this.$store.commit('INCREMENT_MAXPAGE', portfolioq.max_num_pages);
		console.log(portfolioq);
		this.portfolio = portfolioq;
	}
}
</script>

<style scoped></style>
```

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