路由（一）路由-组件切换-重定向和按钮高亮设置

路由-什么是

问：什么是路由？

答：路由是一个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 依赖包

路由-组件切换(配置路由相关)

配置路由步骤：

1. 在main.js中 引入路由模块、use注册组件、import引入各个业务组件
2. 在main.js中 创建路由对象，在内部设置 #锚点 与 组件的对应关系，之后路由对象挂载在Vue实例内部

main.js使用路由示例：

路由-组件切换(设置切换按钮和占位符)

切换按钮：

<router-link  to="设置#锚点信息">标签按钮信息</router-link>
router-link默认生成超链接a标签

组件显示占位符：

<router-view></router-view>

在App.vue中设置 切换按钮 和 组件显示占位符：

总结：

使用路由实现组件切换效果

1. 在main.js中 引入路由、注册use、引入业务组件、创建路由对象、Vue实例内部挂载路由对象
2. 在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样式,使得选中按钮有样式高亮：

小结：

1. 重定向，direct实现该功能
2. 按钮高亮，每个选中按钮都有class="router-link-active"属性值，操作属性值设置样式即可