12 nuxt客户端渲染之路由

上一节我们完成了使用vue脚手架创建了nuxt的第一个demo，这一节我们熟悉一下nuxt中的路由。

1、前提约束

• 完成nuxt的第一个demo，假设名称为nuxt-demo
  https://www.jianshu.com/p/a931b7ba8935

2、普通路由

2.1 在nuxt-demo/pages文件夹下创建student.vue

<template>
  <div> 测试页面/student.vue</div>
</template>
<style></style>

打包，此时nuxt-demo/.nuxt/router.js自动生成路由：

const _0fea2aca = () => interopDefault(import('..\\pages\\student.vue' /* webpackChunkName: "pages_student" */))
const _01fe9fb2 = () => interopDefault(import('..\\pages\\index.vue' /* webpackChunkName: "pages_index" */))
...
routes: [{
    path: "/student",
    component: _0fea2aca,
    name: "student"
  }, {
    path: "/",
    component: _01fe9fb2,
    name: "index"
  }],

• 启动，测试
  在浏览器中输入 http://localhost:3000/student，得到以下结果：
  

2.2 在nuxt-demo/pages中创建文件夹user，在user下创建index.vue

<template>
  <div> 测试页面user/index.vue</div>
</template>
<style></style>

打包，此时nuxt-demo/.nuxt/router.js自动生成路由：

const _ff8e74f2 = () => interopDefault(import('..\\pages\\user\\index.vue' /* webpackChunkName: "pages_user_index" */))
...
routes: [{
    path: "/user",
    component: _ff8e74f2,
    name: "user"
  }],

启动，测试：
在浏览器中输入 http://localhost:3000/user，得到以下结果：

2.3 在nuxt-demo/pages/user文件夹下创建abc.vue

<template>
  <div> 测试页面user/abc.vue</div>
</template>
<script> export default {layout: 'efg'} </script>
<style></style>

在nuxt-demo/layouts文件夹下创建efg.vue【页面布局】:

<template>
  <div>
    <div>this is head</div>
    <nuxt/>
    <div>this is foot</div>
  </div>
</template>
<script> export default {}
</script>
<style></style>

打包，此时nuxt-demo/.nuxt/router.js自动生成路由：

const _2b761f52 = () => interopDefault(import('..\\pages\\user\\abc.vue' /* webpackChunkName: "pages_user_abc" */))
...
routes: [{
    path: "/user/abc",
    component: _2b761f52,
    name: "user-abc"
  }],

启动，测试：
在浏览器中输入http://localhost:3000/user/abc，得到以下结果：

3、嵌套路由

• 在nuxt-demo/pages/文件夹下创建student.vue

<template>
  <div> 用户管理
    <nuxt-link :to="'/student/update'">修改</nuxt-link>
    <nuxt-child/>
  </div>
</template>
<style>
</style>

• 在nuxt-demo/pages/文件夹下创建student文件夹，在该文件夹中创建update.vue

<template>
  <div> id：{{id}} ,名称：{{name}}</div>
</template>
<script> export default {
  async asyncData({store, route}) {
    return {name: '江苏万和'}
  },
  data() {
    return {id: '123'}
  }
} </script>
<style></style>

• 打包，此时nuxt-demo/.nuxt/router.js自动生成路由：

const _0fea2aca = () => interopDefault(import('..\\pages\\student.vue' /* webpackChunkName: "pages_student" */))
const _a546e138 = () => interopDefault(import('..\\pages\\student\\update.vue' /* webpackChunkName: "pages_student_update" */))
...
routes: [{
    path: "/student",
    component: _0fea2aca,
    name: "student",
    children: [{
      path: "update",
      component: _a546e138,
      name: "student-update"
    }]
  }]

启动，测试：
访问http://localhost:3000/student，点击修改，看到如下效果：

以上就是nuxt中的基本路由和嵌套路由。