Vue2(续)

Coder_R
64 阅读2分钟

六、路由进阶

image.png

image.png

6.1 路由模块封装

image.png

Vue支持绝对路径，从当前路径的根目录出发，找到想要的文件：@/想要的文件路径。和当前文件没有关系

image.png

image.png

image.png

6.2 声明式导航-导航链接

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

然后在APP.vue里改css样式（类名）

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

6.3 路由重定向

image.png

image.png

image.png

image.png

image.png

image.png

6.4 编程式导航

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 查询参数找"?和query",动态路由找"/"

image.png

image.png

image.png

image.png

6.5 案例-面经基础版

image.png

image.png

（1）配路由

（1.1）配置：首页 和 面经详情，两个一级路由

image.png

image.png

（1.2）配置：列表、收藏、喜欢、我的-4个二级路由

image.png

（1.3）导航高亮

image.png

image.png

（2）实现功能

（2.1）首页请求渲染

接口文档 image.png

image.png

image.png

（2.2）跳转传参到详情页，详情页渲染

image.png

第一种：查询参数传参

image.png

第二种：动态路由传参

image.png

修复bug

image.png

动态渲染详情页

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

6.6 自定义创建项目-自动配置好路由

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 自动修复：保存代码规范错误的代码后，自动帮我们修复错误

七、vuex

7.1 vuex 五大操作

image.png

image.png

image.png

image.png

image.png

安装vuex@3报错，是因为eslint的版本不兼容，按照如下解决

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

7.2 综合案例 - 购物车

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

json-server --watch db.json启动的数据接口 和 npm run serve 启动的项目 两个网页都不能关闭，否则访问不了接口了

image.png

image.png 1.建立子仓库和仓库的关联，子仓库修改数据，影响到仓库，在页面中渲染 2.页面和子组件关联，页面的数据改动了，渲染到子组件的页面中（props接收数据）

image.png

image.png

image.png

image.png

八、vue2框架搭建-智慧商城项目

image.png 组件库vant（按需导入）
移动端vw适配
request请求方法封装
storage存储模块封装-刷新页面数据不会丢失
api请求模块封装
请求响应拦截
路由跳转传参（查询参数传参、动态路由传参）
vuex分模块管理数据
项目打包

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 封装接口，页面调用 image.png 动态渲染

image.png

image.png

image.png

数据的持久化管理

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png this.$router.fallpush(包含路径参数)
跳转-替换路径：replace
跳转-新开一个页面：path

image.png

image.png

image.png

image.png （1）基本静态结构 image.png

（2）构建 vuex cart 模块，获取数据存储

image.png

image.png

（3）基于 数据 动态渲染 购物车列表

image.png

(4)封装 getters 实现动态统计

image.png

image.png

(5)全选反选功能

image.png

image.png

（6）数字框修改数量功能

image.png

image.png

（7）编辑切换状态

image.png

image.png

删除功能

image.png

image.png

image.png

(8)空购物车处理

image.png

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝