Nuxt.js路由

路由

路由概述:Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间切换路由，我们建议使用 nuxt-link 标签。

基础路由

自动生成基础路由规则

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）

• 资源位置： ~/pages/user/one.vue
• 访问路径：http://localhost:3000/user/one

情况2：每一个目录下，都有一个默认文件 index.vue

• 资源位置： ~/pages/user/index.vue
• 访问路径：http://localhost:3000/user

思考：/user 可以匹配几种文件？

• pages/user.vue 文件 【优先级高】
• pages/user/index.vue 文件

动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

实例1：获得id值，创建资源 user/_id.vue

<template>
  <div>
    查询详情 {{this.$route.params.id}}
  </div>
</template>

<script>
export default {
  transition: 'test',
  mounted() {
    console.info(this.$route)
  },
}
</script>

<style>

</style>

动态命名路由

路径 /news/123 匹配_id.vue还是_name.vue ？

使用 nuxt-link 解决以上问题

• 通过name 确定组件名称：“xxx-yyy”
• 通过params 给对应的参数传递值

<nuxt-link :to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link>
<nuxt-link :to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>

默认路由

404页面，可以采用 _.vue进行处理

嵌套路由

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

要求：父组件 使用 nuxt-child 显示子视图内容

pages/
--| book/						//同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue					//父组件

步骤1：编写父组件 pages/child/book.vue

<template>
  <div>
      <nuxt-link to="/child/book/list">书籍列表</nuxt-link> |
      <nuxt-link to="/child/book/123">书籍详情</nuxt-link> |
      <hr>
      <nuxt-child />
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

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

<template>
  <div>书籍列表</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

步骤3：编写子组件 pages/child/book/_id.vue

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

<script>
export default {

}
</script>

<style>

</style>