上一节我们完成了使用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中的基本路由和嵌套路由。