目录

一、编程式路由导航

1.1 简介

1.2 案例练习

1.2.1 Banner.vue组件

1.2.2 Message.vue路由组件

二、缓存路由组件

2.1 简介

2.2 案例练习

2.2.1 News.vue路由组件

2.2.2 Home.vue路由组件

三、两个新的生命周期钩子

3.1 简介

3.2 案例练习

3.2.1 News.vue路由组件

一、编程式路由导航

1.1 简介

1. 作用：不借助 实现路由跳转，让路由跳转更加灵活

2. 编码，例如：

// $router的两个API this.$router.push({         name: "路由命名",         params: {              参数1: xxx,               参数2: xxx              },       });   this.$router.replace({         name: "路由命名",         params: {              参数1: xxx,               参数2: xxx              },       });

1.2 案例练习

• Banner组件中添加了控制路由 前进 和 后退 的按钮
• Message路由组件中添加了 push跳转和replace跳转按钮

以Vue知识点整理（六）- vue-router（2）中第六节 案例练习 为基础

1.2.1 Banner.vue组件

• 添加了前进和后退的点击按钮，以及对应的点击事件

1.2.2 Message.vue路由组件

• 添加了push跳转和replace跳转，以及对应的点击事件

二、缓存路由组件

2.1 简介

1. 作用：让不展示的路由组件保持挂载，不被销毁

2.编码，例如：

    // 缓存单个路由组件                              // 缓存多个路由组件                        

2.2 案例练习

• News路由组件内添加input输入框
• Home路由组件添加 keep-aliv标签 缓存News路由组件

图示为未缓存路由组件效果，跳转到其他组件后 input输入框 内的内容会自动清空（通过切换，"隐藏"了的组件，默认是被销毁掉的，需要的时候才会再去挂载）

以Vue知识点整理（六）- vue-router（2）中第六节 案例练习 为基础

2.2.1 News.vue路由组件

• 添加了input输入框

2.2.2 Home.vue路由组件

• 添加 keep-aliv标签 缓存News路由组件

由图示可以看出，添加 keep-aliv标签 缓存News路由组件后，input输入框内的内容被保留了下来

三、两个新的生命周期钩子

3.1 简介

1.作用：路由器组件所独有的两个钩子，用于捕获路由组件的激活状态

2. 具体名字：

        （1）activated路由组件被激活时触发

        （2）deactivated路由组件失活时触发

3.2 案例练习

• 在News路由组件内添加一个定时器改变一段文字的透明度变化，并在控制台输出'@'

图示中可看出，即使切换了路由组件，定时器仍旧在运作中

3.2.1 News.vue路由组件

• 添加 activated 和 deactivated 两个生命周期钩子
• 将定时器放入activate生命周期钩子内
• 将清除定时器放入deactivated生命周期钩子内

由图示可看出，切换路由组件后，定时器停止了，控制台也不再输出'@'