NUXT实现同级目录下建多个动态路由（路由伪静态）

最新推荐文章于 2025-06-25 09:07:39 发布

钟Bubble

最新推荐文章于 2025-06-25 09:07:39 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/BubbleABC/article/details/130771613

本文介绍了如何在Nuxt.js项目中在同一目录下创建PageA.vue和PageB.vue两个动态路由页面，并在nuxt.config.js中配置路由，实现路由伪静态。通过配置，项目重启后，成功实现页面间的跳转并查看到预期的路由效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nuxt实现路由伪静态

1、同一文件夹下新建两个页面文件——PageA.vue/PageB.vue

2、在nuxt.config.js文件router项配置两个页面的动态路由，重启项目

router: {
   
   
    extendRoutes(routes, resolve) {
   
   
      routes.push(
        {
   
   
          name: "pageA",
          path: "/

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钟Bubble

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

Nuxt.js - 超详细实现路由 “伪静态“，将浏览器网页路径 URL 链接后面加上 .html 后缀名称（可以自定义任何结尾后缀名称）详细示例教程

资深程序员

04-20

5295

nuxt.js的router使用自定义extendRoutes配置详细教程，nuxt实现路由伪静态，nuxt伪静态，nuxt如何实现伪静态html路由，nuxt怎么自定义路由后缀名.html，nuxt实现同级目录下建多个动态路由，并将链接设置.HTML后缀，nuxt.js项目自定义路由url并且正确链接过去，nuxt如何实现伪静态呢，nuxt.js开发的项目能把网页路径url变成像原始网页那种.html结尾的吗，nuxtjs页面静态化之后,如何添加.html文件名后缀，nuxt如何利用exte

Nuxt - 实现动态路由传递多个参数，路径 URL 上增加多个以 “/“ 斜线分割的参数（不使用 _id.vue 创建文件这种方式）详细示例教程，新手小白直接上手！

资深程序员

04-18

3323

nuxt动态路由详细教程，nuxt如何实现动态路由，nuxt项目怎么在路由上拼接多个参数，nuxt怎么自定义路由多个参数，nuxt路由怎么实现/斜线分割的参数，nuxt如何在路由上加入斜杠/参数示例教程，nuxt路由传多个参数，nuxt.js怎样配置带参路由，nuxt动态路由怎样传多个参数，nuxt自定义路由多个参数，nuxt如何自定义路由的参数,不想使用_下划线建文件夹定义，nuxt路由上传递多个参数，nuxt路由上用斜线/分割,传递多个参数的教程，nuxtextendRoutes配置详解

4 条评论您还未登录，请先登录后发表或查看评论

nuxtlink 拼接path_nuxt-相同目录下的多个动态路由跳转

weixin_39935654的博客

12-22

556

在项目的新需求中，对url规则更改，这里拿课程页面举例，文件目录：pages/course/_course.vue----页面规则需要更改为---->浏览器显示：http://主站地址/course 或者 http://主站地址/course/list_类型id_排序情况_升序(或者降序)_页码因为课程页面包含了分页，以及相应的筛选功能(如下图)，课程封面点进去进入课程详情，...

Nuxt.js 路由配置完全指南：从基础到高级应用

最新发布

gitblog_00086的博客

06-25

404

Nuxt.js 路由配置完全指南：从基础到高级应用前言在Nuxt.js项目中，路由系统是整个应用的核心骨架，它决定了用户如何访问和导航到不同的页面。本文将全面解析Nuxt.js的路由配置选项，帮助开发者掌握从基础路由设置到高级定制技巧。基础路由配置应用基础路径(base) base属性用于设置应用的根URL路径。当你的Nuxt应用部署在子目录而非根目录时，这个配置尤为重要。 export ...

html设置同级目录同一目录,nuxt.js如何实现同级目录下建多个动态路由，并将链接设置.html后缀...

weixin_31075273的博客

06-18

726

nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件，那么页面跳转始终是跳的一个页面，如何解决这个问题呢？下面举个栗子：第一步：新建两个页面文件第二步：在nuxt.config.js文件中配置两个页面的动态路由router: {extendRoutes(routes, resolve) {routes.push({name: "pageA",path: "/strA-:id",c...

nuxt中extendRoutes添加多个扩展路由

我是小奶音啊的博客

09-05

595

【代码】nuxt中extendRoutes添加多个扩展路由。

Nuxt.js 入门到实战多参数中间件插件异步获取数据

黄钟飞的博客

05-23

3778

Nuxt.js Vue提供了服务端渲染及还能支撑spa单页功能的框架。Nuxt.js 主要关注的是应⽤的 UI渲染。功能强大，方便我们快速上手。开箱即用。特点：模块化高效快速开发体验静态⽂件服务 & 强大路由功能官网安装: Nuxt模板项目官方推荐 npx 这样会安装最新模板。然后进入项目。运行 npx create-nuxt-app <项目名> cd <项目名> npm run dev 然后选择你自己需要的插件依赖，不知道可以一直选默认；整体项目目

Vue现有项目Nuxt改造实例解析

icarusliu的专栏

12-27

4334

本文主要讲述如何将一个现有的vue-cli项目按nuxt进行SSR改造。 nuxt官网文档有新项目使用nuxt的相关指南，如有相关需要的可以直接转移到官网了解 nuxt官网地址：nuxt官网注意官网上相关文档基本都是英文的，如想看中文文档可以在w3cSchool上找到，地址：https://www.w3cschool.cn/nuxtjs/nuxtjs-b4kl36fw.html 1. 背景今年自己完成了几个项目的开发，基本都是基于自己总结的一整套前后端基础应用来进行开发的，其中前端使用VUE+ele

React 16.x折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势

CRPER

12-21

3539

前言用的是umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等 umijs类似create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看声明式的路由(nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi ...

nuxt3 多级动态路由

Ajaxguan的博客

06-20

1167

nuxt3 多级动态路由。

一篇学会 - Vue ssr 框架 Nuxt 项目动态路由、嵌套路由、动态嵌套路由优快云官网实例（详细解读）

Bnana博客

05-10

1245

Vue ssr Nuxt 框架嵌套动态路由详解路由 Nuxt 默认自动生成 pages 下文件作为路由结构目录结构实例 <template> <nuxt-link to="/example/home">首页</nuxt-link> <nuxt-link to="/example/login">登录</nuxt-link> </template> 动态路由项目结构解析：home 为父组件，.

伪静态页面和真静态页面html可同时存在

06-15

配置伪静态html时，真静态html无法访问，解决伪静态页面和真静态页面html可同时存在

Nuxt 动态路由合集

weixin_50368372的博客

03-27

225

使用于普通动态路由、多层任意嵌套路由

Nuxt.js静态生成与动态路由策略

天涯学馆

05-30

1623

Nuxt.js 是一个基于 Vue.js 的通用应用框架，用于构建服务器端渲染（SSR）和静态生成（SPA）的 Web 应用。在 Nuxt.js 中，静态生成（Static Generation）和动态路由（Dynamic Routing）是两个关键概念。

如何设置伪静态

qq_36030342的博客

09-26

672

.#开启重写引擎 RewriteEngine on RewriteRule (\d+)_(.*)?.html seo/list.php?page=$1&sou=$2 [L,NC] #防盗链 RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteCond %{HTTP_REFERER} !http://www.qi.com.* [N

Nuxt3项目的SEO优化（robots.txt，页面tdk，伪静态.html，sitemap.xml动态生成等）

weixin_57844432的博客

04-03

2334

Nuxt3项目的SEO优化（robots.txt，页面tdk，伪静态.html，sitemap.xml动态生成等）

Vue3 Nuxt3(一)路由的使用

B0xing的博客

06-19

2059

Nuxt3 vue3 路由

Nuxtjs实现服务端渲染和静态化站点

jimojianghu的专栏

11-09

2398

Nuxt.js是一个基于Vue的增加了node服务的通用框架，本文就是介绍使用它如何实现可以解决Vue项目的服务端渲染，以及生成纯静态化的站点。

Nuxt3中的路由 NuxtLink

04-02

2151

给app.vue中添加标签（相当于vue2中router-view标签）,再在根目录新建 pages 文件夹，添加 index.vue文件，这样当访问localhost:3000/ 时，就不会去访问app.vue，而是 pages/index.vue 页面了。（经测试，此时就算把app.vue删掉，项目依然是可以运行的）

不是，config目录是跟src目录平级的，你仔细思考一下默认项目的结构

03-21

<think>好的，我现在要处理用户的问题。用户提到“config目录是跟src目录平级的”，需要仔细思考默认项目的结构。首先，我需要确认常见的项目结构模式，特别是主流的框架或工具的习惯做法。首先，用户可能在使用某个特定的框架，比如React、Vue、Spring Boot或者Maven项目等。不同的框架可能有不同的目录结构约定。例如，在Maven项目中，通常有src/main/java和src/main/resources，而config目录可能放在项目根目录下，与src平级。但如果是Node.js项目，可能config会放在项目根目录，和src同级。接下来，我需要回忆一些常见项目的例子。例如，Spring Boot项目通常将配置文件放在src/main/resources下，但有时候也会在根目录下放置config文件夹，用于外部配置。而前端项目如React或Vue，通常会有src目录包含源代码，而配置文件如webpack.config.js或babel.config.js可能直接在根目录，或者有一个config文件夹存放更多配置。用户强调config和src是平级，因此需要确定是否存在这样的标准结构。比如，某些项目可能将构建配置、环境变量文件放在根目录的config里，而源代码在src中。例如，Create React App虽然默认不生成config目录，但开发者有时会手动创建config文件夹来存放环境配置。另外，可能用户提到的项目是基于特定工具或框架的，如Next.js、Nuxt.js，或者某些全栈项目结构，其中后端和前端的代码分别放在不同的目录，而config可能作为共享配置放在根目录下。需要进一步考虑这些可能性。还需要检查是否存在混淆的情况，比如用户可能误以为某些配置文件的位置，或者框架版本更新导致结构变化。例如，某些旧项目可能将config放在src内部，而新版本调整到了根目录。为了确保准确性，我应该列举几个常见的项目结构，说明config的位置，并对比用户描述的情况。例如： 1. **Maven项目**： - src/ - main/ - java/ - resources/ - config/ （可能在这里，如果存在的话） 2. **React项目**： - src/ - public/ - config/ （可能自定义添加） 3. **Spring Boot**： - src/main/resources/application.properties （默认配置位置） - 但外部config/目录可以放在根目录，供外部化配置使用。 4. **Node.js项目**： - src/ - config/ - package.json 在这些例子中，如果config目录确实与src平级，那么用户是正确的，尤其是在需要外部化配置或自定义构建配置的项目中。可能需要进一步询问用户具体使用的框架或工具，以提供更准确的解释。不过，根据用户提供的信息，应确认常见的项目结构模式，并指出用户所说的情况在某些项目中是合理的。最后，需要确保回答结构清晰，分点说明不同情况，帮助用户理解可能的情况，同时验证他们的说法是否正确。如果用户提到的结构是特定框架的约定，应明确指出；如果不是，则说明一般情况下可能存在这样的结构。</think>关于项目目录结构的说明如下，帮助您清晰理解： ### 1. **常见项目结构模式** 在主流框架中，目录层级通常遵循约定，但不同工具可能有差异： - **Maven/Java项目** ```text project-root/ ├── src/ # 源代码目录 │ └── main/ │ ├── java/ # Java源码 │ └── resources/ # 配置文件（如Spring Boot的application.properties） └── config/ # 可能存放外部化配置（与src平级） ``` - **关键点**：Spring Boot默认配置在`src/main/resources`，但允许通过外部`config/`目录覆盖配置。 - **React/Vue前端项目** ```text project-root/ ├── src/ # 源代码 ├── public/ # 静态资源 └── config/ # 自定义构建配置（如Webpack、环境变量） ``` - **关键点**：配置文件如`webpack.config.js`通常直接在根目录，但复杂项目可能拆分到`config/`。 - **Node.js后端项目** ```text project-root/ ├── src/ # 业务逻辑代码 ├── config/ # 环境配置（如数据库连接、密钥） └── package.json ``` - **关键点**：`config/`常用于按环境（开发/生产）管理配置。 ### 2. **用户描述结构的合理性** 您提到的 **`config/`与`src/`平级** 是存在的，典型场景包括： - **外部化配置**：将配置文件独立于代码，便于部署时动态替换。 - **构建工具配置**：如Jest、Babel、Webpack的配置文件较多时，归类到`config/`。 - **微服务架构**：统一管理多个服务的配置，避免散落在各模块中。 ### 3. **对比：配置目录的位置差异** | 框架/工具 | 默认配置位置 | 自定义`config/`目录的用途 | |----------------|--------------------------|-------------------------------| | Spring Boot | `src/main/resources` | 外部化配置（优先级高于默认） | | Create React App| 根目录（如`.env`文件） | 扩展Webpack/Babel配置 | | Next.js | `next.config.js`在根目录 | 拆分路由、插件配置到`config/` | ### 4. **验证您的项目结构** 若您的项目符合以下特征，则结构正确： - ✅ `config/`存放**环境变量**、**构建脚本**或**部署配置**。 - ✅ `src/`仅包含**业务逻辑代码**，不掺杂配置文件。 - ✅ 通过路径引用明确区分代码与配置（如`require('../config')`）。 ### 5. **下一步建议** - **查看文档**：确认您使用的框架是否推荐此结构（如Spring Cloud Config）。 - **检查构建配置**：确保工具（Webpack、Maven）能正确读取`config/`中的文件。 - **模块化配置**：若配置复杂，可按功能拆分到`config/database/`、`config/auth/`等子目录。总结：您的描述是合理的，尤其在需要隔离代码与配置的场景中，`config/`与`src/`平级是常见实践。