【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  代码如下：

<template>
  <div>
    <h1>/about</h1>
  </div>
</template>

<script>
  export default {
    name: "about"
  }
</script>

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

      

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

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

about/index.vue  代码如下：

<template>
  <div>
    <h1>/about/index</h1>
  </div>
</template>

<script>
  export default {
    name: "about"
  }
</script>

继续访问 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 里面添加 <nuxt-child/> 标签可以显 xx/index.vue 的内容。

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

<template>
  <div>
    <h1>/about</h1>
    <nuxt-child/> <!--增加nuxt-child标签-->
  </div>
</template>

<script>
  export default {
    name: "about-index"
  }
</script>

再次访问 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 示例代码如下：

<template>
  <div>
    <h1>{{ $route.params.id }}</h1>
  </div>
</template>

<script>
  export default {}
</script>

当然，$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.页面跳转

在页面之间使用路由，官方建议使用 <nuxt-link> 标签，例如：

<template>
  <nuxt-link to="/news/1">查看详情</nuxt-link>
</template>

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

<a href="/news/1">查看详情</a>

我们写个 for 循环测试一下

<template>
  <div>
    <div v-for="news in newsList">
      <nuxt-link :to="'/news/'+news.id">{{news.title}}</nuxt-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data: () => {
      return {
        title: 'Hello Nuxt',
        newsList: [
          {id: 1, title: '新闻标题一'},
          {id: 2, title: '新闻标题二'},
          {id: 3, title: '新闻标题三'},
        ]
      }
    }
  }
</script>

最终生成的html代码如下：

<div data-server-rendered="true" id="__nuxt">
  <div id="__layout">
    <div>
      <div>
        <div><a href="/news/1">新闻标题一</a></div>
        <div><a href="/news/2">新闻标题二</a></div>
        <div><a href="/news/3">新闻标题三</a></div>
      </div>
    </div>
  </div>
</div>