10. 路由

nuxt中配置路由只需在pages文件夹下创建对应的文件即可，不需要像vue那样，单独配置。

固定路由

现在有2个路由地址，分别为：

http://xxxx/news
http://xxxx/news/detail

其目录地址为 : pages/news.vue、pages/news/detail.vue

动态路由

以"_xxx.vue"开头的，为动态路由。这里的_xxx在地址栏中输入什么值都可以。比如 ：

http://xxxx/abc
http://xxxx/123
http://xxxx/abc123

需要注意的是，不一定都要以id来命名。只要前面有带_的，后面是什么名字都可以。不过在获取地址栏参数的值的时候，如果是_id.vue，则需要用route.params.id来获取。如果你的文件名是_info.vue，那么获取参数就是route.params.info

动态路由 - 下划线为前缀的目录

注意上图，文件夹是以_开头的，其含义为 ：

http://xxx/可变/info

比如输入下列地址都是合法的

http://xxxx/abc/info
http://xxxx/123/info
http://xxxx/abc123/info

子路由

创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。如下 ：

红色框是主路由，蓝色框是子路由，子路由的文件夹名字必须和主路由的文件名同名。然后在主路由的文件，用<nuxt-child />来显示子路由

parent.vue

<template>
    <div>
        <p>parent</p>
        <nuxt-child />
    </div>
</template>

child1.vue

<template>
  <div>child1</div>
</template>

child2.vue

<template>
  <div>child2</div>
</template>

控制动态路由传入的值

http://www.baidu.com/question/xx，这里我想动态路由后面的xx，必须是一个数字。则可以这么做

export default {
  validate({ params }) {
    return /^d+$/.test(params.id); // 判断id是否是一个数字，返回true或者false
  }
};

validate如果返回true，则程序继续。如果返回false，则会跑到我们定义好的错误页面或者nuxt默认的错误页面

地址栏末尾添加.html

export default {
  asyncData({ route, redirect }) {
    const id = route.params.id;
    if (!id.includes(".html")) {
      redirect(id + ".html");
    }
  },
};

在地址栏上输入http://xxxx/123自动改成http://xxxx/123.html

路由地址代理

假设访问a页面的地址是http://www.tx.com/test/a，那么在不改变文件的放置的位置的情况下，如何通过访问http://www.tx.com/a访问到原先写在pages/test/a里的页面呢？

这时可以使用路由地址代理，在nuxt.config.js中添加以下配置

router: {
  extendRoutes(routes, resolve) {
    const router = [
      {
          path: "/a",
          component: resolve(__dirname, "./pages/test/a.vue")
      },
    ];
    routes.push(...router);
  }
},

当路由访问到/a的地址时，会把地址代理到pages/test/a.vue

路由跳转

模板跳转方法

<nuxt-link to='/'>首页</nuxt-link>

js的跳转方法和vue一样