基本路由及动态路由(二)

1.nuxt.js

1.1 路由

1.1.1 概述

• nuxt.js 根据 pages 目录下的内容，自动生成路由。
• 路由切换，建议使用 标签

1.1.2 基本路由

• 情况1：pages下的每一个名称(目录名称、文件名称)对应一个路径

  ​ pages/user/one.vue 对应访问路径 http://localhost:3000/user/one

• 情况2：每一个文件夹下都有一个默认文件 index.vue

  ​ pages/index.vue 对应访问路径 http://localhost:3000/

  ​ pages/user/index.vue 对应访问路径 http://localhost:3000/user/

• 存在一种情况

  • 访问路径：http://localhost:3000/user/
  • 可能访问资源：
    • page/user.vue 页面
    • page/user/index.vue 页面 【nuxt.s推荐】

1.1.3 动态路由

• nuxt.js 使用 下划线_ 表示 动态文件名或目录名

目录结构	访问路径	自动生成路由路径	获得参数
/user/_id.vue	:3000/user/123	/user/:id	this.$route.params.id

1.1.5 动态命名路由

• 如果同一个文件夹中，存在两个动态命名vue，如何区分。
  • ~/pages/user/_id.vue
  • ~/pages/user/_name.vue
• 在nuxt.js采用动态参数的方式进行区分

<nuxt-link :to="{name:'确定文件', params: { 确定参数 } }"/>
name取值：user-id  , 文件夹名与文件名组合，使用-连接
params取值：对应变量的参数

    <h1>动态命名路由</h1>
    <!-- 执行 ~/pages/user/_id.vue页面 -->
    <nuxt-link :to="{name:'user-id',params:{id:'100'}}">user目录--参数id</nuxt-link> <br/>
    <!-- 执行 ~/pages/user/_name.vue页面 -->
    <nuxt-link :to="{name:'user-name',params:{name:'jack'}}">user目录--参数name</nuxt-link> <br/>