Nuxt2配置/index作为URL路径段，页面跳转异常求助

根据你的需求和目录结构，核心问题是路由规则与目录结构的冲突，以及缺少子路由渲染出口，以下是具体解决方案：

一、调整目录结构（推荐，符合约定式路由规范） #

当前pages/index.vue对应根路由/，而pages/index/目录的子路由没有对应的父路由组件，导致跳转失败。调整为如下结构：

pages/
--| index/
-----| index.vue   # 对应路由 /index
-----| news/
-------| index.vue # 对应路由 /index/news
-----| User/
-------| index.vue # 对应路由 /index/User
--| home.vue       # 对应根路由 /（若需要保留根路由）

同时需要：

1. 在pages/index/index.vue中添加<nuxt-child />（Nuxt项目）或<router-view />（纯Vue项目），作为子路由内容的渲染出口。
2. 若需要将根路由/重定向到/index，可在配置文件中添加重定向规则：
   • Nuxt项目（nuxt.config.js）：

     export default {
       router: {
         extendRoutes(routes) {
           routes.push({ path: '/', redirect: '/index' })
         }
       }
     }
     

   • 纯Vue项目（router/index.js）：

     const routes = [
       { path: '/', redirect: '/index' },
       {
         path: '/index',
         component: () => import('../pages/index/index.vue'),
         children: [
           { path: 'news', component: () => import('../pages/index/news/index.vue') },
           { path: 'User', component: () => import('../pages/index/User/index.vue') }
         ]
       }
     ]
     

二、手动配置路由（保留原目录结构） #

如果不想调整目录结构，可通过手动配置路由覆盖默认规则：

Nuxt项目（nuxt.config.js） #

export default {
  router: {
    extendRoutes(routes, resolve) {
      // 手动添加目标路由
      routes.push(
        {
          path: '/index/news',
          name: 'News',
          component: resolve(__dirname, 'pages/index/News/index.vue')
        },
        {
          path: '/index/User',
          name: 'User',
          component: resolve(__dirname, 'pages/index/User/index.vue')
        }
      )
    }
  }
}

纯Vue项目（router/index.js） #

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../pages/index.vue'
import News from '../pages/index/News/index.vue'
import User from '../pages/index/User/index.vue'

const routes = [
  {
    path: '/',
    component: Index
  },
  {
    path: '/index/news',
    component: News
  },
  {
    path: '/index/User',
    component: User
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

三、跳转链接注意事项 #

确保页面内的跳转路径与配置的路由完全匹配，例如：

<!-- Nuxt项目 -->
<nuxt-link to="/index/news">新闻页</nuxt-link>
<nuxt-link to="/index/User">用户页</nuxt-link>

<!-- 纯Vue项目 -->
<router-link to="/index/news">新闻页</router-link>
<router-link to="/index/User">用户页</router-link>

内容的提问来源于stack exchange，提问作者Dickson