【Nuxt.js搭建服务端渲染(SSR)网站】2.路由

1.路由规则

Nuxt.js 官方文档上有句话：根据 pages 目录结构自动生成 vue-router 模块的路由配置。意思就是 Nuxt.js 是自动根据 pages 的目录结构和文件名来自动地生成 vue-route 的路由配置描述文件。使得我们不需要去自己写配置，而是按照一定的规则来创建目录和文件名即可，在 Nuxt.js 上开发项目我们是无需关心路由配置文件的，因此，这篇文章我也只说明 Nuxt.js 的规则和使用方法，具体生成的配置文件是怎样的可以参考官方文档

1.1 基础路由

Nuxt.js 按照 pages 的目录结构生成路由，文件名是 index.vue 的 url 对应其上层目录名，文件名不是 index.vue 的则根据文件名生成对应路由，假设 pages 目录下有如下目录和文件：

/test.vue  =>  localhost:3000/test

/index.vue  =>  localhost:3000/  （错误访问地址：localhost:3000/index）

/hello/index.vue =>  localhost:3000/hello （错误访问地址：localhost:3000/hello/index）

打开我们搭建的新的项目的 pages 目录里面只有有一个 index.vue 文件，运行起来，然后访问 localhost:3000 显示了 index.vue 内容

而我们把 url 改成 localhost:3000/index 去访问时却出现404提示，根据规则我们可推测 localhost:3000/index 应该是去查找 pages 目录下的 index/index.vue 发现找不到，所以404了。

接下来，我们创建一个测试的页面与 index.vue 同级就叫 about.vue  代码如下：

此时，再来访问浏览器 localhost:3000/about 发现是可以正确访问的。

那我们再创建一个 about 目录然后目录下面再创建一个 index.vue 看看效果会如何。当前目录结构如下：

pages|- about|- index.vue|- about.vue|- index.vue

about/index.vue  代码如下：

继续访问 localhost:3000/about 发现结果和上面的一样，也就是说加载文件定位的还是 about.vue 而不是 about/index.vue 。而删掉 about.vue 后再再次刷新页面，文件就加载到 about/index.vue 了。

也就是说，除了 index 外，生成路由的规则优先按 xx.vue ，没有此文件再使用 xx/index.vue 。

1.2 嵌套路由

但是要注意，在此规则下 Nuxt.js 还提供了一种路由嵌套的机制，如果同时存在 xx.vue 和 xx/index.vue 情况下，在 xx.vue 里面添加  标签可以显 xx/index.vue 的内容。

在刚才的测试文件中，我们找到 about.vue 修改代码如下：

再次访问 localhost:3000/about ，这时两个文件的内容都显示在了浏览器上

1.3 动态路由

有时候我们的路由是需要根据参数去变化的，像一些 restful 风格的接口，比如获取新闻的 url 可能是这样的：http://xx.xx.xx/news/1 后面的数字是新闻的 ID。

这种情况下我们只需要创建以【 “_” + “名称” 】创建 vue 文件即可，例如上面这个例子创建的目录和文件如下：

pages|- news|- _id.vue

当浏览器访问 localhost:3000/news/xx 时则加载 /news/_id.vue 文件。如果想要在 _id.vue 中获取 xx 这个参数，则用 $route.params.id 即可，_id.vue 示例代码如下：

当然，$route.params.id 中的 id 不是固定的，如果你的文件名不是 _id.vue 而是 _nid.vue ，那么获取参数的值的写法则为 $route.params.nid  

这种方式实现的动态路由其参数不是必填的，也就是当访问  localhost:3000/news/ 时最好的参数没有添加，同样会加载到 _id.vue ，如果需要变成必填，需要将目录和文件名调整一下，变成下面这个样子

pages|- news|- _id|- index.vue

区别就是新增了一个 _id 目录，然后把之前的 _id.vue 文件重名名为 index.vue 并放到了 _id 目录下面

此时再访问 localhost:3000/news/ 则跳转到404页面了

2.页面跳转

在页面之间使用路由，官方建议使用 标签，例如：

运行后我们查看渲染的代码其实就是生成一个 标签，如下：

查看详情

我们写个 for 循环测试一下

最终生成的html代码如下：

新闻标题一新闻标题二新闻标题三

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！