XiangJv

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间使用路由，使用  <nuxt-link>   标签。

栗子：

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

nuxt的router.js是根据pages的目录结构生成的

假如pages的目录是

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么router.js如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由：

需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

pages/
--| _slug/
-----| comments.vue
--| users/
-----| _id.vue
--| index.vue

生成的router.js文件如下

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

需要注意的是： 在父组件(.vue文件) 内增加   <nuxt-child/>   用于显示子视图内容。

  nuxt 官网路由配置