export function createRouter() { return new Router({ mode: 'history', base: decodeURI('https://www.jb51.net/'), linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _76687814, children: [{ path: "", component: _9ceb4424, name: "about" }, { path: ":id", component: _6b59f854, name: "about-id" }] }, { path: "https://www.jb51.net/", component: _d3bf5a4e, name: "index" }], fallback: false }) }
更改完目录结构，那我们嵌套的路由应该如何展示？在 vue.js 中开发的时候使用 router-view 这个标签完成的。为了性能的优化 Nuxt 也提供了一个对应的标签 nuxt-child 。
如果想实现嵌套路由传参需要稍微的改动一下目录结构，按照上面的方法实现就好了，下面是一个路由结构的例子。
page目录
├─page │ ├─about │ │ ├─detail | | | ├─_id.vue | | | └─index.vue │ │ └─index.vue └───└─index.vue
router.js
export function createRouter() { return new Router({ mode: 'history', base: decodeURI('https://www.jb51.net/'), linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _76687814, name: "about", children: [{ path: "detail", component: _0a09b97d, name: "about-detail" }, { path: "detail/:id?", component: _fa7c11b6, name: "about-detail-id" }] }, { path: "https://www.jb51.net/", component: _d3bf5a4e, name: "index" }], fallback: false }) }
在 _id.vue 中则可以使用id这个参数了。访问路由 :3000/about/detail/123 ，依然可以拿到传入的 id 为 123 的这个参数。
说了这么多了，还有很多问题没得说完，关于路由的全局守卫又应该如何去使用？在 Nuxt 根目录下有个 plugins 文件夹。首先要做的是在里面创建一个名为 router.js 文件。
plugins-router.js
export default ({app}) => { app.router.beforeEach((to,form,next) => { console.log(to) next(); }); }
导出了一个函数，在这个函数中可以通过结构拿到 vue 的实例对象名叫 app 。需要注意的是，这个 beforeEach 函数的执行，有可能会在服务端也会有可能在客户端输出。客户端首次访问的页面会在服务端做输出，一旦渲染完成之后，则不会再在服务端输出，则会一直在客户端进行输出了。
说到这里做个小插曲，那么又该怎么区分当前是在客户端环境还是服务端环境呢？可以使用 process.server 获取到当前的运行环境，其得到的是 Boolean 值， true 服务端， fasle 客户端。
做了这些之后去访问路由，仿佛没有任何输出，无论实在客户端还是在服务端，都没有任何打印输出，中间缺少了步骤，需要在根目录下找到 nuxt.config.js 对插件进行配置。
nuxt.config.js
const pkg = require('./package') module.exports = { plugins: [ '@/plugins/element-ui', '@/plugins/router' ] }
由于更改了 Nuxt 配置需要重启一下服务，才能正常执行刚刚写入的插件。然后访问刚刚写入的路由，会看在服务端初次渲染的时候，会输出我们想要的那些东西，进行路由跳转的话，会在客户端输出，这也就证明了 Nuxt 只会做首屏的服务器渲染。
路由说了这么接下来需要说一下 Nuxt 是如何为指定的路由配置数据做渲染的。其实 Nuxt 在做渲染的时候包裹了很多层。首先有一个 Document 作为其模板，然后再去寻找其布局的页面，找到对应的页面之后，再根据引用去找到相关的组件进行渲染，数据请求与数据挂载，一系列完成之后，把剩余的路由信息返还给客户端，渲染完成，这个就是 Nuxt 简单的渲染流程。
在上面提到了一个 布局页面 ，这个东西应该去哪里找？又应该怎么做呢？它对于项目而言对于开发又有什么好处？在 Nuxt 根目录下有一个 layouts 文件夹，下面有一个 default.vue 这个文件就是上面提到的渲染页面，也就同等于 vue 开发中的 App.vue ，在这里可以做很多事情。例如添加一个全局的导航。
在 layouts 文件夹添加一个 about.vue 文件写入如下内容，接下来需要在 pages 下面的 about.vue 中通知，对应 pages 使用哪个布局页面，不写则使用默认，然后访问 :3000/about 相关的页面，只要是和 about 相关的页面，都会展示这个内容。
layouts - about.vue
<template> <div> <h2>Aaron 个人博客主页</h2> <nuxt></nuxt> </div> </template>
pages - about.vue