基础路由不需要配置，Nuxt.js 会根据 pages 中的文件夹及文件，自动生成的路由配置

假设 pages 的目录结构如下：

1. pages/ 
2. –| user/ 
3. —–| index.vue 
4. —–| one.vue 
5. –| index.vue 

那么，Nuxt.js 自动生成的路由配置如下：

1. router: { 
2.   routes: [ 
3.     { 
4.       name: 'index', 
5.       path: '/', 
6.       component: 'pages/index.vue' 
7.     }, 
8.     { 
9.       name: 'user', 
10.       path: '/user', 
11.       component: 'pages/user/index.vue' 
12.     }, 
13.     { 
14.       name: 'user-one', 
15.       path: '/user/one', 
16.       component: 'pages/user/one.vue' 
17.     } 
18.   ] 
19. } 

同样的，在 /.nuxt/router.js 文件中，我们也能够看到相关内容；

Nuxt 中的路由导航有三种方式，一种就是普通的 a 标签跳转，太过于基础这里就不说了，两外两种分别是 nuxt-link 组件和编程式导航，nuxt-link 组件用于在页面中添加链接跳转到其他页面，目前 <nuxt-link> 的作用和 router-link 一致，推荐阅读 Vue 路由文档 来了解它的使用方法，所以，你在Vue 中如何使用，在Nuxt 中同样如何使用就可以了。

而编程式导航的用法，同样与 Vue 中的使用方式一致：

1. <template> 
2.   <div> 
3.     <h2>nuxt-link 跳转：</h2> 
4.     <nuxt-link to="/user/info">Go to user</nuxt-link>  
5.     <h2>编程式导航 跳转：</h2> 
6.     <button @click="clickBtn">Go to user</button> 
7.   </div> 
8. </template> 
9.  
10. <script> 
11. import axios from 'axios' 
12. export default { 
13.   methods:{ 
14.     clickBtn(){ 
15.       this.$router.push('/user') 
16.     } 
17.   } 
18. } 
19. </script> 

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的 以下划线作为前缀 的 Vue 文件 或 目录。

下划线后面的名字随意命名，但是在获取动态路由参数时，文件的名字就是获取的关键字，用法与 Vue-Router 基本一致:

\pages\user_kk.vue

1. <template> 
2.   <div class="mis"> 
3.     <h3>动态路由-route</h3> 
4.     <!— 获取参数，打印 –> 
5.     <p>获取参数，打印： {{$route.params.kk}}</p> 
6.     <p>控制台也有输出</p> 
7.   </div> 
8. </template> 
9.  
10. <script> 
11. export default { 
12.   mounted(){ 
13.     // 获取路由参数，控制台打印 
14.     console.log(this.$route.params.kk) 
15.   } 
16. } 
17. </script> 
18.  
19. <style> 
20. .mis{ 
21.   background: coral; 
22. } 
23. </style>