Nuxt.js自动路由原理的实现方法

Nuxt.js是一个基于Vue.js的通用应用框架，它集成了Vue 2、Vue-Router、Vuex和Vue-Meta来开发完整而强大的Web应用。

它的特点包括服务器端渲染，强大的路由功能，支持异步数据和HTML头标签管理。

今天我们主要介绍Nuxt的一个特性，强大的路由功能。Nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。

Nuxt源代码地址：https://github.com/nuxt/nuxt.js

建议打开源代码，按照文章的步骤操作。如果是第一次写，欢迎批评指正文中任何错误或表述不清的地方。

首先，介绍了nuxt路由的使用

Nuxt会根据pages下的文件自动生成和导入路由，支持vue-router的基本路由、动态路由和嵌套路由。基本路由非常简单。需要注意的是，使用动态路由时，需要创建相应的以下划线为前缀的Vue文件或目录

例如：

pages/-| users/-| _ id . vue-| index . vuenxt . js生成相应的路由配置表为：

router : { router :[{ name : ' index '，path: '/'，component : ' pages/index . vue ' }，{ name: 'users-id '，path: '/users/:id '？component : ' pages/users/_ id . vue ' }]}，users-id的路由路径有：id？参数，指示路由是可选的。如果您想将其设置为必需的路由，您需要在users/_id目录中创建一个index.vue文件。

其次，在使用嵌套路由时，需要在pages下添加一个同名的Vue文件来存储子视图组件。

例如：

pages/-| users/-| _ id . vue-| index . vue-| users . vue nuxt . js生成相应的路由配置表为：

router : { router :[{ path : '/users '，component: 'pages/users.vue '，children: [{ path: ' '，component : ' pages/users/index。vue '，name:' users'}，{path:' : id '，component:' pages/users/_ id。vue '，名称：' users-id'}}]]}下一步

第一步

从npm run dev开始，在package.json中，npm run dev运行后的命令是

Dev:' port=3004背包dev' ps:背包是Node.js项目的一个简单的构建系统。在这里，它定义了一个配置背包. config.js扩展webpack，背包Dev命令在开发模式下运行webpack。

第二步

查看定制的背包. config.js，并在服务器文件下返回index.js

第三步

看看index.js，它构建服务器端口号，读取nuxt.config文件，并初始化nuxt类。在节点模块中引入了nuxt，Nuxt的构建器

第四步

现在你可以去nuxt的源代码看看如何自动生成路线。在builder.js中，打包所有文件，一个步骤是构建路由

GenerateRoutesAndFiles，引入glob库遍历页面下的文件并处理字符串，最后将所有vue文件地址、整个项目地址和页面作为参数传递给createRoutes函数

第五步

看看createRoutes函数具体做了什么(common/utils.js)。遍历在createRoutes函数中传递的所有文件地址，然后处理每个文件地址字符串并用破折号拼接。使用此作为路由。名称

用lodash库查找routes，这里我们可以看到为什么在使用嵌套routes的时候要在同一个路径下添加一个同名的vue文件，它的判断条件是在routes中找到name:route.name的集合。

如果有嵌套路由，route.path暂时为空。如果没有嵌套路由，请用“/”直接拼接route.path。这里可以看到动态路由的组成原理。如果是动态路由，route.path将用：替换_并添加？

将route.name和route.path放入路由中，并对它们进行排序。先放短路径，最后调用cleanChildrenRoutes函数处理嵌套路由。

此时，命名路径和路由名称的过程已经结束。

第六步

回到build.js，打包后会生成模板文件routes.js。

在模板文件route.js中，举例说明了项目的路线

介绍了路由组件。引入时，组件被命名为下划线加上组件的哈希值，并被重新引入

这是一个自动生成路线的完整过程。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。