Day07_核心问题

Day07_核心问题

01_什么是路由

问题

1. 路由是什么呢?
2. Vue中的路由是什么?

答案

1. 路由是什么呢?
   1. 路由是一种映射关系
2. Vue中的路由是什么?
   1. 路径和组件的映射关系

02_为什么要学路由

问题

1. 什么是单页面应用?
2. 单页面应用好处?
3. 单页面如何切换场景?

答案

1. 什么是单页面应用?
   1. 所有的业务都在一个页面编写, 只有一个html
2. 单页面应用好处?
   1. 开发效率高, 用户体验好
3. 单页面如何切换场景?
   1. 依赖路由切换显示

03_如何使用路由

问题

1. 以后Vue中如何实现路由?

答案

1. 以后Vue中如何实现路由?
   1. 集成vue-router模块包

04_组件分类

问题

1. 为何把.vue文件分类?
2. 页面组件用在哪里?
3. 复用组件用在哪里?

答案

1. 为何把.vue文件分类?
   1. 方便理解和使用
2. 页面组件用在哪里?
   1. 配合路由, 切换页面
3. 复用组件用在哪里?
   1. 页面组件, 重复渲染结构一样的标签

05_vue-router基础使用

问题

1. vue-router本质是什么?
2. vue-router如何使用?
3. 规则如何生效?

答案

1. vue-router本质是什么?
   1. 第三方包, 下载后集成到vue项目中
2. vue-router如何使用?
   1. 下包/引入/注册/规则/路由对象/注入/挂载点
3. 规则如何生效?
   1. 切换url上hash值, 开始匹配规则, 对应组件展示到router-view位置

练习时间：30s（输入命令初始化项目）

06_声明式导航_基础使用

问题

1. router-link是什么?
2. router-link怎么用?
3. router-link好处?

答案

1. router-link是什么?
   1. VueRouter在全局注册的组件, 本质就是a标签
2. router-link怎么用?
   1. 当标签使用, 必须传入to属性, 指定路由路径值
3. router-link好处?
   1. 自带激活时的类名, 可以做高亮

练习时间：5m

07_声明式导航_跳转传值

问题

1. 声明式导航跳转时, 如何传值给路由页面?
2. 如何接收路由传值?

答案

1. 声明式导航跳转时, 如何传值给路由页面?
   1. to=“/path?参数名=值”
   2. to=“/path/值” (需在路由规则里配置/path/:参数名)
2. 如何接收路由传值?
   1. $route.query.参数名
   2. $route.params.参数名

08_路由重定向

问题

1. 如何监测默认路由?
2. 如何重定向路由路径?

答案

1. 如何监测默认路由?
   1. 规则里定义path: ‘/’
2. 如何重定向路由路径?
   1. redirect配置项, 值为要强制切换的路由路径

09_路由404设置

问题

1. 如何给路由体系里设置404页面?

答案

1. 如何给路由体系里设置404页面?
   1. 在数组最后一个位置, 插入匹配*的规则, 展示404页面

练习时间：5m

10_路由模式修改

问题

1. 如何修改路由模式呢?

答案

1. 如何修改路由模式呢?
   1. 在实例化路由对象时, 传入mode选项和值修改

11_编程式导航

问题

1. JS如何切换路由路径?

答案

1. JS如何切换路由路径?
   1. this.$router.push()配置path/name
   2. 要和路由规则数组里对应

12_编程式导航_传参

问题

1. JS切换路由如何传值, 如何接收值?

答案

1. JS切换路由如何传值, 如何接收值?
   1. path+query传, $route.query接
   2. name+params传, $route.params接

练习时间：5m

13_路由嵌套

问题

1. 二级路由如何配置?
2. 二级路由注意什么?

答案

1. 二级路由如何配置?
   1. 创建需要的二级页面组件
   2. 路由规则里children中配置二级路由规则对象
   3. 一级页面中设置router-view显示二级路由页面
2. 二级路由注意什么?
   1. 二级路由path一般不写根路径/
   2. 跳转时路径要从/开始写全

14_激活类名的区别

问题

1. 自动添加的2个类名的区别?

答案

1. 自动添加的2个类名的区别?
   1. router-link-exact-active – url的hash值和href完全匹配
   2. router-link-active – url的hash值包含href路径值匹配

15_路由守卫

问题

1. 什么是路由守卫?

答案

1. 什么是路由守卫?
   1. 路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由

练习时间：5m

16_vant组件库_介绍

问题

1. 什么是vant组件库?

答案

1. 什么是vant组件库?
   1. 封装了很多的组件, 支持移动项目中大多数使用场景

17_vant组件库_全部引入

问题

1. 如何引入Vant组件库?

答案

1. 如何引入Vant组件库?
   1. 组件库是一个包, 先下载
   2. 按照文档指引, 在main.js全局注册
   3. 到某.vue内直接使用Vant组件名

练习时间：30s（让学生先下包）

18_vant组件库_手动按需引入

问题

1. Vant组件库如何手动按需引入使用?

答案

1. Vant组件库如何手动按需引入使用?
   1. import 从vant库里引出某个组件
   2. import 单独引出样式
   3. 在当前页面注册此组件名即可

练习时间：5m

19_vant组件库_自动按需引入

问题

1. 如何自动按需引入Vant组件库?

答案

1. 如何自动按需引入Vant组件库?
   1. webpack依赖babel-plugin-import的插件
   2. 把import按需引入方式, 自动转成只引入某个组件方式

20_vant组件库_弹出框

问题

1. 想使用某个UI界面时怎么办?

答案

1. 想使用某个UI界面时怎么办?
   1. 去文档查找相关例子
   2. 然后根据步骤和提示使用即可

21_vant组件库_登陆表单

问题

1. 使用Vant组件库, 需要注意什么?

答案

1. 使用Vant组件库, 需要注意什么?
   1. vant组件库里有很多标签, 仔细和快速的熟悉文档

练习时间：5m