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

最新推荐文章于 2024-08-16 21:50:24 发布

钟Bubble

最新推荐文章于 2024-08-16 21:50:24 发布

阅读量2.1k

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/BubbleABC/article/details/130771613

版权

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

摘要由CSDN通过智能技术生成

nuxt实现路由伪静态

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

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钟Bubble

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

王佳斌

04-20

4070

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

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

Bnana博客

05-10

1135

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

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

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

weixin_31075273的博客

06-18

673

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

Nuxt3【文件路由】pages 详解（含Nuxt3中的路由管理）

最新发布

朝阳39的博客

08-16

1615

在 pages 文件夹中定义页面，支持 .vue、.js、.jsx、.mjs、.ts 或 .tsx注意事项：页面仅能有一个根元素（HTML 注释也被视为元素）< template > < h1 > 首页 < template > < h1 > 首页 < h1 > 首页

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

weixin_39935654的博客

12-22

523

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

nuxt中extendRoutes添加多个扩展路由

我是小奶音啊的博客

09-05

495

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

nuxt3 多级动态路由

Ajaxguan的博客

06-20

991

nuxt3 多级动态路由。

nuxt 服务端渲染

Y_Z233的博客

03-09

2188

nuxt 服务端渲染

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

icarusliu的专栏

12-27

4169

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

nuxt.js学习笔记（超级全）

你爹的博客

07-14

1433

平平无奇小菜鸡写的平平无奇小笔记

如何设置伪静态

qq_36030342的博客

09-26

630

.#开启重写引擎 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

Nuxt 动态路由合集

weixin_50368372的博客

03-27

197

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

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

天涯学馆

05-30

1049

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

01.Nuxt.js(概述,目录结构,路由,动态路由)

Pole丶逐

04-24

323

1. 概述 SPA单页web应用,vue就是SPA具体技术不利于SEO SEO: 搜索引擎优化( 增加收录,提高权重 ) SSR: 服务器端渲染技术将前端分为客户端和服务器端服务器端渲染就是让服务器端的代码先执行,就可以提前看到数据 nuxt.js就是基于vue.js的SSR技术 1.1 目录结构 nuxt项目目录结构 nuxt: 编译后目录 assets: 存在需要便...

Vue3 Nuxt3(一)路由的使用

B0xing的博客

06-19

1824

Nuxt3 vue3 路由

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

jimojianghu的专栏

11-09

2205

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

Nuxt3中的路由 NuxtLink

04-02

1986

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

nuxt3使用记录四：加载静态资源时路径的写法研究

lsjweiyi的博客

04-18

1935

资源路径要直接纯字符串写在template中，才能通杀。