Day07_核心问题
01_什么是路由
问题
- 路由是什么呢?
- Vue中的路由是什么?
答案
- 路由是什么呢?
- 路由是一种映射关系
- Vue中的路由是什么?
- 路径和组件的映射关系
02_为什么要学路由
问题
- 什么是单页面应用?
- 单页面应用好处?
- 单页面如何切换场景?
答案
- 什么是单页面应用?
- 所有的业务都在一个页面编写, 只有一个html
- 单页面应用好处?
- 开发效率高, 用户体验好
- 单页面如何切换场景?
- 依赖路由切换显示
03_如何使用路由
问题
- 以后Vue中如何实现路由?
答案
- 以后Vue中如何实现路由?
- 集成vue-router模块包
04_组件分类
问题
- 为何把.vue文件分类?
- 页面组件用在哪里?
- 复用组件用在哪里?
答案
- 为何把.vue文件分类?
- 方便理解和使用
- 页面组件用在哪里?
- 配合路由, 切换页面
- 复用组件用在哪里?
- 页面组件, 重复渲染结构一样的标签
05_vue-router基础使用
问题
- vue-router本质是什么?
- vue-router如何使用?
- 规则如何生效?
答案
- vue-router本质是什么?
- 第三方包, 下载后集成到vue项目中
- vue-router如何使用?
- 下包/引入/注册/规则/路由对象/注入/挂载点
- 规则如何生效?
- 切换url上hash值, 开始匹配规则, 对应组件展示到router-view位置
练习时间:30s(输入命令初始化项目)
06_声明式导航_基础使用
问题
- router-link是什么?
- router-link怎么用?
- router-link好处?
答案
- router-link是什么?
- VueRouter在全局注册的组件, 本质就是a标签
- router-link怎么用?
- 当标签使用, 必须传入to属性, 指定路由路径值
- router-link好处?
- 自带激活时的类名, 可以做高亮
练习时间:5m
07_声明式导航_跳转传值
问题
- 声明式导航跳转时, 如何传值给路由页面?
- 如何接收路由传值?
答案
- 声明式导航跳转时, 如何传值给路由页面?
- to=“/path?参数名=值”
- to=“/path/值” (需在路由规则里配置/path/:参数名)
- 如何接收路由传值?
- $route.query.参数名
- $route.params.参数名
08_路由重定向
问题
- 如何监测默认路由?
- 如何重定向路由路径?
答案
- 如何监测默认路由?
- 规则里定义path: ‘/’
- 如何重定向路由路径?
- redirect配置项, 值为要强制切换的路由路径
09_路由404设置
问题
- 如何给路由体系里设置404页面?
答案
- 如何给路由体系里设置404页面?
- 在数组最后一个位置, 插入匹配*的规则, 展示404页面
练习时间:5m
10_路由模式修改
问题
- 如何修改路由模式呢?
答案
- 如何修改路由模式呢?
- 在实例化路由对象时, 传入mode选项和值修改
11_编程式导航
问题
- JS如何切换路由路径?
答案
- JS如何切换路由路径?
- this.$router.push()配置path/name
- 要和路由规则数组里对应
12_编程式导航_传参
问题
- JS切换路由如何传值, 如何接收值?
答案
- JS切换路由如何传值, 如何接收值?
- path+query传, $route.query接
- name+params传, $route.params接
练习时间:5m
13_路由嵌套
问题
- 二级路由如何配置?
- 二级路由注意什么?
答案
- 二级路由如何配置?
- 创建需要的二级页面组件
- 路由规则里children中配置二级路由规则对象
- 一级页面中设置router-view显示二级路由页面
- 二级路由注意什么?
- 二级路由path一般不写根路径/
- 跳转时路径要从/开始写全
14_激活类名的区别
问题
- 自动添加的2个类名的区别?
答案
- 自动添加的2个类名的区别?
- router-link-exact-active – url的hash值和href完全匹配
- router-link-active – url的hash值包含href路径值匹配
15_路由守卫
问题
- 什么是路由守卫?
答案
- 什么是路由守卫?
- 路由在真正跳转前, 会执行一次beforeEach函数, next调用则跳转, 也可以强制修改要跳转的路由
练习时间:5m
16_vant组件库_介绍
问题
- 什么是vant组件库?
答案
- 什么是vant组件库?
- 封装了很多的组件, 支持移动项目中大多数使用场景
17_vant组件库_全部引入
问题
- 如何引入Vant组件库?
答案
- 如何引入Vant组件库?
- 组件库是一个包, 先下载
- 按照文档指引, 在main.js全局注册
- 到某.vue内直接使用Vant组件名
练习时间:30s(让学生先下包)
18_vant组件库_手动按需引入
问题
- Vant组件库如何手动按需引入使用?
答案
- Vant组件库如何手动按需引入使用?
- import 从vant库里引出某个组件
- import 单独引出样式
- 在当前页面注册此组件名即可
练习时间:5m
19_vant组件库_自动按需引入
问题
- 如何自动按需引入Vant组件库?
答案
- 如何自动按需引入Vant组件库?
- webpack依赖babel-plugin-import的插件
- 把import按需引入方式, 自动转成只引入某个组件方式
20_vant组件库_弹出框
问题
- 想使用某个UI界面时怎么办?
答案
- 想使用某个UI界面时怎么办?
- 去文档查找相关例子
- 然后根据步骤和提示使用即可
21_vant组件库_登陆表单
问题
- 使用Vant组件库, 需要注意什么?
答案
- 使用Vant组件库, 需要注意什么?
- vant组件库里有很多标签, 仔细和快速的熟悉文档