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