Nuxt3 嵌套路由用法日常记录

原创已于 2024-08-20 18:37:40 修改 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-08-20 18:35:57 首次发布

我现在有一个页面需要使用嵌套路由我需要先在pages下面新建一个主页面的vue文件
暂时起名 about.vue

使用嵌套路由他有两个子路由分别是 join connect

需要在pages 下新建 about同名文件夹 nuxt会自动扫描并注册到路由中
在about文件夹下还需要一个index.vue文件作为默认子路由
那么基本文件如下

需要在⭐about.vue中放置路由出口组件这里直接使用nuxt提供的组件

<NuxtPage :page-key="route => route.fullPath" />

访问路由/about/join 即可查看到主页面和join组件中的内容了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KanCoder

关注关注

2
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Nuxt 3 路由系统详解：配置与实践指南

https://blog.cmdragon.cn/

06-21

3150

摘要：本文是一份关于Nuxt 3路由系统的详尽指南。它从介绍Nuxt 3的基本概念开始，包括Nuxt 3与Nuxt 2的区别和选择Nuxt 3的理由。然后，它详细解释了安装和配置Nuxt 3的步骤，以及Nuxt 3路由系统的基础知识，如动态路由和嵌套路由。接着，它介绍了路由中间件的作用和编写自定义中间件的方法，并讨论了页面布局、导航链接和页面过渡效果。最后，它涵盖了高级路由技巧，如异步数据获取、错误页面处理和路由守卫，以及实战案例分析，包括博客系统路由设计、电商网站路由设计和多语言支持的路由实现。最后，它讨

Nuxt项目路由嵌套nuxt-child

weixin_45966674的博客

04-03

1689

例如这里我们想给engineering加一个子路由就可以在同级创建一个 engineering文件夹然后在下面创建文件Information.vue。是因为你父路由的界面上要加路由标签不然它不知道你的路由组件要放在哪我们打开engineering.vue组件。其实很简单你只需要在pages文件夹的目录中创建一个和父路由一样名字的文件夹然后在这个文件夹下创建子路由组件即可。简单讲述了路由的用法但我们还有子路由的概念。这样我们的子路由就加载出来了。

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

【Nuxt3】路由参数（动态路由、嵌套路由）

iuukai

09-23

5461

多层嵌套 params 参数（通常用于捕获404）动态路由参数（与页面路由差不多，但有些区别）

vue nuxt路由嵌套

warrah 南极狼

04-07

2680

有的时候我们采用的是二级路由，动态变动某个区域，一级菜单控制页面切换，而二级路由决定了页面内容的变化。原先我想着通过layout来做，那样太傻了，因为每个动态区域的页面你得复制多分，类似router-view,nuxt也有他自己的处理方式。学习自然是先模仿后超越，光看官方文档还是理解不够透彻，实际运行就明白是怎么回事了。嵌套路由 Nuxt 路由—03 先仿照示例可以看到嵌套路由，nuxt生成了什么。上面只是个demo，在实际工程中怎么做呢？接下来看到与xchh.vue同名目录下生成的嵌套路由,

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

01-18

Nuxt嵌套路由官网上的API详解：点击链接看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在区域显示一个页面内容怎么办？自己案例代码： pages/parent.vue 父组件的页面的内容  child child2</nux

精选资源

在nuxt中使用路由重定向的实例

01-18

我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。官方文档（以及ts类型）的定义中给出了这一选项： ...然而，到了SSR的环境下，如果使用nuxt，因为nuxt采用了约定大于配置的

分享：nuxt动态嵌套路由

awseda的博客

05-11

837

动态嵌套路由这个应用场景比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。假设文件结构如下： pages/ --| _category/ -----| _subCategory/ --------| _id.vue --------| index.vue -----| _subCategory.vue -----| index.vue --| _category.vue --| index.vue Nuxt.js 自动生成的路由配置如下： router: { routes: [

【Nuxt】404 页面和嵌套路由

小秀的博客

08-05

963

router.params 也可以获取动态参数 slug，为一个数组，比如上面的 [‘about’, ‘fdsf’, ‘fdsfs’, ‘fsdfsfsdf’, ‘…此时包含三个页面组件：/about, /about/about-fdsfsdf, /about/fdsf/fdsfs/fsdfsfsdf/…尽管它被称为“错误页面”，但它不是一个路由，不应该放在 ~/pages 目录中。具体 404 路由页面可以写成某个路径下的 404，也可以直接写在 pages 下，作为根目录的 404。

分享：nuxt嵌套路由

awseda的博客

05-10

1693

nuxt嵌套路由你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。 Warning: 别忘了在父组件(.vue文件) 内增加用于显示子视图内容。假设文件结构如： pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue Nuxt.js 自动生成的路由配置如下： router: { routes: [

nuxt3教程（路由的使用）

yeh_shyer的博客

11-14

1814

当浏览器请求一个网页时，服务器会根据请求的 URL，获取相应的数据（可以是从数据库、缓存或者其他数据源），然后将数据和模板组合在一起，生成一个包含完整内容的 HTML 页面，最后将这个 HTML 页面发送给浏览器。Nuxt3采用了Vite作为默认的构建工具，Vite利用了浏览器原生的ES模块导入功能，在开发环境下实现了极快的冷启动速度和模块热替换，比如，当你修改一个组件的代码时，Vite能够快速地更新页面，而不需要像传统构建工具那样重新构建整个应用，大大提升了开发效率。它支持自动导入组件、函数等。

Nuxt3嵌套路由，报错Failed to resolve component: NuxtChild

热门推荐

来一颗砂糖橘

04-26

2万+

Nuxt3嵌套路由，子组件内容不显示，控制台报错[Vue warn]: Failed to resolve component: NuxtChild If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Vue3 Nuxt3(一)路由的使用

B0xing的博客

06-19

2142

Nuxt3 vue3 路由

4.6-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》路由模式

DVTOP的博客

11-24

649

Nuxt3采用约定路由方式，当我们创建了 pages 文件夹目录后，Nuxt 3会自动集成vue-router，结合 pages 目录下的文件(夹)名来构建我们的项目routes配置。

【前端】【Nuxt3】 Nuxt 3 路由系统全解析

qq_59344127的博客

04-04

1575

Nuxt3的所有路由解析与冲突问题

Nuxt路由——nuxt2

mantou_riji的博客

01-19

2438

约定式路由是nuxt已经约定好的路由定义方式。nuxt的路由无需单独配置，他会自动读取作为，访问对应的路由地址就会显示对应的页面。在nuxt中标签相当于，相当于。Nuxt 路由的原理是基于，并根据文件名从 pages/ 目录中创建的每个组件生成路由。layout/default.vue是。 layout/default.vue pages目录： goods.vue 页面： pages/test/secondRouter.vue 如果是，路由页面的名称是以开头的。动态路由中参数存储在中，可以通过该变

Nuxt3中的路由 NuxtLink

04-02

2256

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

vue-router：嵌套路由

cssshua的博客

03-06

541

模板抽离我们已经学习过了Vue模板的另外定义形式，使用<template></template>。  <template id="home"> <div>首页</div> </template> <tem

Nuxt3 -- 路由篇

ScreenshotOfSeed的博客

12-03

5399

普通路由 nuxt3会自动整合vue-router，并且映射pages/目录到应用的routes配置中。 [ { path: '/', component: '~/pages/index.vue', name: 'index', } ] 动态路由如果我们在文件名或者文件夹名称里面包含了方括号，它们将被转换为动态路由参数。 -| pages/ ---| users-[group]/ -----| [id].vue 然后通过 $route.params.group 通过

nuxt3实现子路由跳转

Nuxt3 嵌套路由用法 日常记录

Nuxt3 嵌套路由用法日常记录