Vue3中的页面跳转，详解，常见场景，常见问题与最佳解决方案

在Vue3中，页面跳转通常通过Vue Router实现，以下是详细指南、常见场景、问题及解决方案：

---

一、安装与配置

1. 安装Vue Router 4：

   npm install vue-router@4
   

2. 路由配置（src/router/index.js）：

   import {
         createRouter, createWebHistory } from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';
   
   const routes = [
     {
         path: '/', component: Home },
     {
         path: '/about', component: About },
   ];
   
   const router = createRouter({
        
     history: createWebHistory(),
     routes,
   });
   
   export default router;
   

3. 挂载路由（main.js）：

   import {
         createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   app.use(router);
   app.mount('#app');
   

---

二、页面跳转方式

1. 声明式导航（<router-link>）

• 基础跳转：

  <router-link to="/about">关于我们</router-link>
  

• 命名路由（推荐）：

  <router-link :to="{ name: 'About' }">关于</router-link>
  

• 动态参数：

  <router-link :to="{ name: 'User', params: { id: 123 }}">用户详情</router-link>