路由-什么是
问:什么是路由?
答:路由是一个js功能模块,用于解决做个组件切换显示问题的,本身对组件切换的各个技术有做封装,是更成熟组件切换解决方案,使用起来更高级、方便。
使用路由后,原生的 #锚点超链接、component占位符标签、window.onhashchange、window.location.hash就看不到了
路由:就是浏览器地址栏#锚点信息 与 业务组件的对应关系
内部有对各个实现细节做“封装”(超链接a标签 component占位符标签 window.onhashchange window.location.hash等等)
也可以理解为是:超链接 ----> #锚点 ------> 业务组件 的请求路径体现
路由是对组件切换实现的封装,具体有:#锚点超链接、component占位符标签、window.onhashchange、window.location.hash等等
为什么使用?
答:路由是vue开发各个项目必须使用的技术之一,是开发spa项目
路由-安装
安装配置,请执行指令:
路由是一个功能模块(类似vue、axios等),使用之前需要安装
yarn add vue-router
依赖包:通过npm i 或 yarn add 装的东西就是依赖包,每个依赖包内部有多个功能模块
模块:一个js文件内部有做"模块化导出"动作,这个js文件就是一个(功能)模块
yarn add 依赖包
npm install 依赖包
路由-组件切换(配置路由相关)
配置路由步骤:
- 在main.js中 引入路由模块、use注册组件、import引入各个业务组件
- 在main.js中 创建路由对象,在内部设置 #锚点 与 组件的对应关系,之后路由对象挂载在Vue实例内部
main.js使用路由示例:
路由-组件切换(设置切换按钮和占位符)
切换按钮:
<router-link to="设置#锚点信息">标签按钮信息</router-link>
router-link默认生成超链接a标签
组件显示占位符:
<router-view></router-view>
在App.vue中设置 切换按钮 和 组件显示占位符:
总结:
使用路由实现组件切换效果
- 在main.js中 引入路由、注册use、引入业务组件、创建路由对象、Vue实例内部挂载路由对象
- 在App.vue中使用router-link 设置切换按钮、使用router-view设置组件显示占位符
路由-组件切换执行过程分析
路由规则的匹配过程:
- 用户点击 页面的 路由链接router-link,点击的一瞬间,就会修改 浏览器 地址栏 中的 Hash 锚点地址信息,
- 当 hash 信息被修改以后,会立即被 路由 监听到 (路由有封装onhashchange事件)
- 在onhashchange事件里边感知变化后的hash锚点信息(window.location.hash),然后与对应的组件进行联系
- 组件的显示是通过路由占位符rouer-view显示的
路由-组件切换(重定向)
用户第一次访问网站页面("/根目录"首页)时,地址栏里边没有“hash锚点”的信息,
也就没有对应的组件用于显示,明显项目体验不好,现在可以通过redirect实现重定向效果
即 设定“/根目录”与一个具体路由联系起来,使得没有任何锚点信息时,就显示这个默认路由对应的组件
重定向:使得一个路由地址A与另一个路由地址B联系起来,执行A的时候会跳转执行B
路由地址/信息: 就是#锚点信息
示例:
路由-组件切换(按钮高亮设置)
标签按钮被单击访问,其对应组件就显示,为了使得用户体验比较好,给当前单击的按钮设置与众不同的css样式,使得用户可以很清楚地知道是哪个按钮正在被访问,增强用户体验
通过观察,发现一个按钮被单击访问,其对应的html标签就会存在 class=“router-link-active” 的属性值,设置其设置css样式即可
在App.vue中给 router-link-active 设置 css样式,使得选中按钮有样式高亮:
小结:
- 重定向,direct实现该功能
- 按钮高亮,每个选中按钮都有class="router-link-active"属性值,操作属性值设置样式即可