需要注意的是，如果你的路由是有文件夹嵌套的话， Nuxt 是用使用 - 来拼接路由的 name 名称的(如: about-detail )，但是文件夹内部的 index.vue 会直接已文件夹的名字作为 name 。一旦知道了路由的 name ，这样我们就可以使用命令的方式跳转路由了。
再次更改一下 about/index.vue 。
about/index.vue
<template> <div> <h2>This About</h2> <nuxt-link :to="{name:'about-detail'}">详情</nuxt-link> <router-link :to="{name:'index'}">首页</router-link> <button @click="onClick">跳转到详情</button> </div> </template> <script> export default { methods: { onClick() { this.$router.push({name:"about-detail"}) } } } </script>
使用路由访问 :3000/about 地址，分别点击详情、首页与 button ，都是能够正常跳转的，与之前的 Vue 开发是完全没有任何区别的。在 vue-router 中有一个很重要的一个点就是 动态路由 的概念，如果想要实现动态路由应该怎么处理呢？
如果想要在 Nuxt 中使用动态路由的话，需要在对应的路由下面添加一个 _参数名.vue 的文件，在 about 文件下面添加一个 _id.vue
page目录
├─page │ ├─about │ │ ├─detail.vue │ │ ├─_id.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: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "/about/:id", component: _6b59f854, name: "about-id" }, { path: "https://www.jb51.net/", component: _d3bf5a4e, name: "index" }], fallback: false }) }
可以明显的看到在 /about/:id 这个路由，明显的变化不止这些变动的还有 name: "about-id" 不再是之前的 name:about 了。如果想要使用这个 id 的话必须在 _id.vue 中才能获取到。
**_id.vue**
<template> <div> {{$route.params.name}} {{$route.params.id}} </div> </template>
在 _id.vue 中编写以上代码并使用 :3000/about/ABC ,可以看到在页面中已经展示了当前的 id 值。
在实际开发过程当中可能 params 可能会有多个参数，又应该怎么处理呢？
调整目录结构
// id为可选参数 ├─page │ ├─about │ │ ├─_name | | | └─_id | | | └─index.vue │ │ └─index.vue └───└─index.vue
**about - _name - _id.vue**
<template> <div> {{$route.params.name}} {{$route.params.id}} </div> </template>
弄完之后看下 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: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "/about/:name", component: _2ec9f53c, name: "about-name" }, { path: "/about/:name/:id", component: _318c16a4, name: "about-name-id" }, { path: "https://www.jb51.net/", component: _d3bf5a4e, name: "index" }], fallback: false }) }
这里展示的是第二种情况， id 为必选参数的情况，路由被编译的结果。
虽然路由已经添加了参数，但是 id 属性不是必填属性，这样的话不能满足项目需求又要如何处理呢？很简单的，在 _id.vue 文件同目录下添加一个 index.vue 文件就可以了。
// id为必选参数 ├─page │ ├─about │ │ ├─_name | | | ├─_id.vue | | | └─index.vue │ │ └─index.vue └───└─index.vue
需要注意的是，一定要在 _id.vue 文件中使用传入的参数，直接获取在 index.vue 中是拿不到任何信息的。但是如果访问 :3000/about/ABC 这样的路由的话，实在 index.vue 中是可以获取到 name 参数的。
在刚才的 router.js 文件中生成的所有的路由都是平级的，如何实现路由的嵌套，如果想要实现嵌套路由的话，必须有和当前路由同名的文件夹存在，才能完成路由的嵌套。
page目录
├─page │ ├─about | | ├─_id.vue | | └─detaile.vue │ ├─about.vue └───└─index.vue
router.js