01.Nuxt.js(概述,目录结构,路由,动态路由)

1. 概述

• SPA单页web应用,vue就是SPA具体技术
  • 不利于SEO
• SEO: 搜索引擎优化( 增加收录,提高权重 )
• SSR: 服务器端渲染技术
  • 将前端分为客户端和服务器端
  • 服务器端渲染就是让服务器端的代码先执行,就可以提前看到数据
• nuxt.js就是基于vue.js的SSR技术

1.1 目录结构

• nuxt项目目录结构
  • nuxt: 编译后目录
  • assets: 存在需要便已处理css,js等资源
  • components: 组件目录
  • layouts: 布局目录
  • pages: 所有组件存放目录
  • plugins: 插件目录
  • static: 静态资源目录(js/css/img等)
  • store: vuex数据
  • nux.config.js: 核心配置文件
  • package.json: vue项目打包文件

2. 路由

2.1 概述

• nuxt.js会自动根据目录结构生成路由

2.2 基本路由

• pages文件夹下的每一个文件都对应一个路径
  • 文件位置: pages/user/login.vue
  • 对应路径: /user/login
• 存在默认文件index.vue
  • 文件位置: pages/user/index.vue
  • 对应路径: /user/ 或 /user

2.3动态路由

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

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

2.4 动态路由命名

• 可以区分同一文件夹下的两个动态路由

  <nuxt-link :to="{name:'文件位置', params: { 参数 } }"/>
  //文件夹名与文件名进行组合时,使用 - 连接
  
  // 文件位置: /pages/user/login.vue
  // 访问路径:
  <nuxt-link :to="{ name : 'user-login'}"></nuxt-link>
  
  // 文件位置: /pages/user/_id.vue
  // 访问路径:
  <nuxt-link :to="{ name : 'user-id', params : {id : 123}}"></nuxt-link>
  // 参数获取: this.$route.params.id
  
  // 文件位置: /pages/user/_name.vue
  // 访问路径:
  <nuxt-link :to="{ name : 'user-name', params : {name : 'jack'}}"></nuxt-link>
  // 参数获取: this.$route.params.name