Vue.js 3 路由问题解决指南：让 Router-View 正常显示页面

vue.js

2024-03-18 11:46:46

解决 Vue.js 3 路由问题，让 Router-View 正常显示

问题：路由失效，无法在 Router-View 中显示页面

在 Vue.js 3 项目中，你可能遇到从 ProjectTypeSection 导航到 InteriorDesignView 和 ExteriorDesignView 页面时出现的问题。

解决方案：

1. 检查路由设置：

确保在 pagesRoutes.js 中正确定义了子路由。
检查 index.js 中是否正确注册了路由。

2. 检查组件使用：

确保在 ProjectTypeSection.vue 中正确使用 router-link。
确保子组件 InteriorDesignView 和 ExteriorDesignView 存在且注册为组件。

3. 排除其他问题：

确保使用的是最新浏览器。
检查控制台是否存在 JavaScript 错误。
尝试清除浏览器缓存和重新加载页面。

示例代码：

// pagesRoutes.js
{
  path: '/projects',
  name: 'projects',
  component: ProjectsView,
  children: [
    {
      path: 'interior-design',
      name: 'interiorDesign',
      component: InteriorDesignView
    },
    {
      path: 'exterior-design',
      name: 'exteriorDesign',
      component: ArchitectureView
    }
  ]
}

// index.js
import { pagesRoutes } from '@/router/pagesRoutes.js'

const routes = [
  {
    path: '/',
    name: "home",
    component: HomeView
  },
  ...pagesRoutes
]

// ProjectTypeSection.vue
<router-link
  class="w-full flex max-sm:justify-center max-md:justify-center max-lg:justify-center"
  v-for="item of combineData"
  :key="item.id"
  :to="item.route"
>
  ...
</router-link>