Nuxt.js(二)

路由对比

标签名	描述
<nuxt-link>	nuxt.js中切换路由
<Nuxt />	nuxt.js的路由视图
<router-link>	vue默认切换路由
<router-view/>	vue默认路由视图

基础路由

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.vue	指定文件

动态路由

路由中路径匹配	组件位置及其名称
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

代码

一
user的详情页

二
修改

三


四

五

嵌套路由

pages/child/book.vue
创建嵌套子路由，你需要添加一个 父组件Vue 文件，同时添加一个与该文件同名的
目录用来存放子视图组件。

书籍列表 |
书籍详情 |

---

<script>
export default {

}
</script>

<style>

</style>

：编写子组件 pages/child/book/list.vue

	<template>
	  <div>书籍列表</div>
	</template>
	
<script>
export default {

}
</script>

<style>

</style>

编写子组件 pages/child/book/_id.vue

<template>
  <div>书籍详情{{$route.params.id}} </div>
</template>

<script>
export default {

}
</script>

<style>

</style>