nuxt 路由配置

香菊网 发表于: 2019-06-18 分类: ssr  前端front  H5部分  

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 官网路由配置  

标签: ssr前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮