当前位置 > it书童 > 大前端 > 正文

Nuxt 基础路由

大前端 it书童 2020-09-27 22:10:53 0赞 0踩 102阅读 0评论

在 vue.js 中,我们需要自定义路由规则,而 Nuxt 内置了路由自动映射功能,只需要按照其规范将页面放到相应的位置,即可自动实现路由映射

页面目录结构与路由映射

Nuxt.js 根据 pages 的目录结构及页面名称生成路由

如:pages 的目录结构如下:

$ tree pages
pages
└── user
    ├── index.vue
    └── one.vue

Nuxt.js 自动生成的路由配置如下:

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

页面代码

index.vue 代码

<template>
  <div>用户管理首页</div>
</template>

<script>
  export default {
    // 指定使用的模板
    layout: 'test',
  }
</script>

<style>
</style>

one.vue 代码

<template>
  <div>one 页面</div>
</template>

<script>
  export default {
    layout: "test"
  }
</script>

<style>
</style>

访问页面

http://localhost:3000/user

http://localhost:3000/user/one

参考

Nuxt routing

关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/720/nuxt-basic-routing