接口隔离原则 定义：客户端不应该被迫依赖于它不使用的方法，即：一个类对另一个类的依赖应该建立在最小的接口上以安全门为例：存在的问题：如果要增加新的品牌的安全门，则违背了开闭原则SafetyDoorpublic interface SafetyDoor { /** * 防盗 */ void antiTheft(); /** * 防火 */ void fireproof(); /** * 防水 */ void waterproof(); }TestSafetyDoorpublic class TestSafetyDoor implements SafetyDoor { @Override public void antiTheft() { System.out.println("防盗"); } @Override public void fireproof() { System.out.println("防火"); } @Override public void waterproof() { System.out.println("防水"); } }Clientpublic class Client { public static void main(String[] args) { //存在的问题：如果要增加新的品牌的安全门，则违背了开闭原则 TestSafetyDoor testSafetyDoor = new TestSafetyDoor(); testSafetyDoor.antiTheft(); testSafetyDoor.fireproof(); testSafetyDoor.waterproof(); } }改进：抽象出安全门各个功能的接口，新增其他品牌的安全门时只需实现对应功能的接口AntiTheftpublic interface AntiTheft { /** * 防盗 */ void antiTheft(); }Fireproofpublic interface Fireproof { /** * 防火 */ void fireproof(); }Waterproofpublic interface Waterproof { /** * 防水 */ void waterproof(); }TestSafetyDoorpublic class TestSafetyDoor implements AntiTheft, Fireproof, Waterproof { @Override public void antiTheft() { System.out.println("防盗"); } @Override public void fireproof() { System.out.println("防火"); } @Override public void waterproof() { System.out.println("防水"); } }Test01SafetyDoorpublic class Test01SafetyDoor implements AntiTheft, Fireproof { @Override public void antiTheft() { System.out.println("防盗"); } @Override public void fireproof() { System.out.println("防火"); } }Clientpublic class Client { public static void main(String[] args) { //Test品牌安全门 TestSafetyDoor testSafetyDoor = new TestSafetyDoor(); testSafetyDoor.antiTheft(); testSafetyDoor.fireproof(); testSafetyDoor.waterproof(); System.out.println("================="); //Test品牌安全门 Test01SafetyDoor test01SafetyDoor = new Test01SafetyDoor(); test01SafetyDoor.antiTheft(); test01SafetyDoor.fireproof(); } }

依赖倒置原则 定义：高层模块不应该依赖低层模块，两者都应该依赖其抽象；抽象不应该依赖细节，细节应该依赖抽象以组装电脑为例：存在的问题：现在的电脑只能使用给定的组件，如果要使用其他的，则违背了开闭原则XiJiepublic class XiJie { public void save(String data) { System.out.println("使用希捷硬盘存储数据：" + data); } public String get() { System.out.println("使用希捷硬盘读取数据"); return "数据"; } }Intelpublic class Intel { public void run() { System.out.println("使用Intel cpu"); } }Kingstonpublic class Kingston { public void save() { System.out.println("使用金士顿内存条"); } }Computerpublic class Computer { private XiJie hardDisk; private Intel cpu; private Kingston memory; public XiJie getHardDisk() { return hardDisk; } public void setHardDisk(XiJie hardDisk) { this.hardDisk = hardDisk; } public Intel getCpu() { return cpu; } public void setCpu(Intel cpu) { this.cpu = cpu; } public Kingston getMemory() { return memory; } public void setMemory(Kingston memory) { this.memory = memory; } public void run() { System.out.println("电脑运行了"); String data = hardDisk.get(); System.out.println("从硬盘上获取的数据是：" + data); cpu.run(); memory.save(); } }ComputerDemopublic class ComputerDemo { public static void main(String[] args) { //创建组件对象 XiJie hardDisk = new XiJie(); Intel cpu = new Intel(); Kingston memory = new Kingston(); Computer computer = new Computer(); //组装计算机 computer.setHardDisk(hardDisk); computer.setCpu(cpu); computer.setMemory(memory); //运行 //存在的问题：现在的电脑只能使用给定的组件，如果要使用其他的，则违背了开闭原则 computer.run(); } }改进：抽象出各个配件的接口，让Computer类依赖抽象，而不是依赖于各组件的具体实现类HardDiskpublic interface HardDisk { /** * 存储数据 * * @param data 数据 */ void save(String data); /** * 读取数据 * * @return */ String get(); }Cpupublic interface Cpu { /** * 运行 */ void run(); }Memorypublic interface Memory { /** * 保存 */ void save(); }XiJiepublic class XiJie implements HardDisk { @Override public void save(String data) { System.out.println("使用希捷硬盘存储数据：" + data); } @Override public String get() { System.out.println("使用希捷硬盘读取数据"); return "数据"; } }Intelpublic class Intel implements Cpu { @Override public void run() { System.out.println("使用Intel cpu"); } }AMDpublic class Amd implements Cpu { @Override public void run() { System.out.println("使用AMD cpu"); } }Kingstonpublic class Kingston implements Memory { @Override public void save() { System.out.println("使用金士顿内存条"); } }Computerpublic class Computer { private HardDisk hardDisk; private Cpu cpu; private Memory memory; public HardDisk getHardDisk() { return hardDisk; } public void setHardDisk(HardDisk hardDisk) { this.hardDisk = hardDisk; } public Cpu getCpu() { return cpu; } public void setCpu(Cpu cpu) { this.cpu = cpu; } public Memory getMemory() { return memory; } public void setMemory(Memory memory) { this.memory = memory; } public void run() { System.out.println("电脑运行了"); String data = hardDisk.get(); System.out.println("从硬盘上获取的数据是：" + data); cpu.run(); memory.save(); } }ComputerDemopublic class ComputerDemo { public static void main(String[] args) { //创建组件对象 HardDisk xiJie = new XiJie(); //Cpu intel = new Intel(); Cpu intel = new Amd(); Memory kingston = new Kingston(); //创建计算机对象 Computer computer = new Computer(); //组装计算机 computer.setHardDisk(xiJie); computer.setCpu(intel); computer.setMemory(kingston); //运行 computer.run(); } }

里氏替换原则 定义：子类可以扩展父类的功能，但不能改变父类原有的功能（子类继承父类时，除了添加新的方法和功能外，尽量不要重写父类的方法）以正方形不是长方形为例：在resize方法中，Rectangle类型的参数不能被Square类型的参数所代替，如果进行了替换，则不能得到预期的打印结果Rectanglepublic class Rectangle { private double length; private double width; public double getLength() { return length; } public void setLength(double length) { this.length = length; } public double getWidth() { return width; } public void setWidth(double width) { this.width = width; } }Squarepublic class Square extends Rectangle { @Override public void setLength(double length) { super.setLength(length); super.setWidth(length); } @Override public void setWidth(double width) { super.setWidth(width); super.setLength(width); } }RectangleDemopublic class RectangleDemo { public static void main(String[] args) { //创建长方形对象 Rectangle rectangle = new Rectangle(); rectangle.setLength(20); rectangle.setWidth(10); //扩宽 resize(rectangle); printLengthAndWidth(rectangle); System.out.println("===================="); //创建正方形 Square square = new Square(); square.setWidth(20); resize(square); //在resize方法中，Rectangle类型的参数不能被Square类型的参数所代替，如果进行了替换，则不能得到预期的打印结果 printLengthAndWidth(square); } public static void resize(Rectangle rectangle) { //如果长 > 宽，进行扩宽操作 while (rectangle.getLength() >= rectangle.getWidth()) { rectangle.setWidth(rectangle.getWidth() + 1); } } public static void printLengthAndWidth(Rectangle rectangle) { System.out.println("长：" + rectangle.getLength()); System.out.println("宽：" + rectangle.getWidth()); } }改进：抽象出四边形接口，长方形、正方形实现四边形接口Quadrilateralpublic interface Quadrilateral { /** * 获取长 * * @return */ double getLength(); /** * 获取宽 * * @return */ double getWidth(); }Rectanglepublic class Rectangle implements Quadrilateral { private double length; private double width; public void setLength(double length) { this.length = length; } public void setWidth(double width) { this.width = width; } @Override public double getLength() { return length; } @Override public double getWidth() { return width; } }Squarepublic class Square implements Quadrilateral { private double side; public double getSide() { return side; } public void setSide(double side) { this.side = side; } @Override public double getLength() { return side; } @Override public double getWidth() { return side; } }RectangleDemopublic class RectangleDemo { public static void main(String[] args) { //创建长方形对象 Rectangle rectangle = new Rectangle(); rectangle.setLength(20); rectangle.setWidth(10); resize(rectangle); printLengthAndWidth(rectangle); System.out.println("===================="); //创建正方形对象（此时正方形和长方形不存在父子关系） Square square = new Square(); square.setSide(10); printLengthAndWidth(square); } public static void resize(Rectangle rectangle) { //如果长 > 宽，进行扩宽操作 while (rectangle.getLength() >= rectangle.getWidth()) { rectangle.setWidth(rectangle.getWidth() + 1); } } public static void printLengthAndWidth(Quadrilateral quadrilateral) { System.out.println("长：" + quadrilateral.getLength()); System.out.println("宽：" + quadrilateral.getWidth()); } }

开闭原则 定义：对扩展开放，对修改关闭以输入法更换皮肤为例抽象皮肤类public abstract class AbstractSkin { /** * 显示方法 */ public abstract void display(); } 默认皮肤public class DefaultSkin extends AbstractSkin { @Override public void display() { System.out.println("默认皮肤"); } }自定义皮肤public class TestSkin extends AbstractSkin { @Override public void display() { System.out.println("测试皮肤"); } } 搜狗输入法public class SouGouInput { private AbstractSkin skin; public void setSkin(AbstractSkin skin) { this.skin = skin; } public void display() { skin.display(); } }测试public class Client { public static void main(String[] args) { //1.创建输入法对象 SouGouInput input = new SouGouInput(); //2.创建默认皮肤对象 //DefaultSkin skin = new DefaultSkin(); TestSkin skin = new TestSkin(); //3.将皮肤设置到输入法中 input.setSkin(skin); //4.显示皮肤 input.display(); } }

新的组件 1. FragmentVue2：组件必须有一个根标签Vue3：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中减少标签层间，性能优化2. Teleport概念：将 组件html结构 移动到指定位置<teleport to="body"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>你好</h3> <h4>孙笑川</h4> <h4>药水哥</h4> <h4>Giao哥</h4> <button @click="isShow = false">关闭弹窗</button> </div> </div> </teleport>3. Suspense等待异步组件时渲染定义的缺省内容，提升用户体验实现：引入异步组件import {defineAsyncComponent} from "vue"; const Child = defineAsyncComponent(() => import('./components/Child'))使用 Suspense 包裹组件，并配置好 default 和 fallback<template> <div class="app"> <h3>App组件</h3> <Suspense> <template v-slot:default> <Child/> </template> <template v-slot:fallback> <h3>加载中...</h3> </template> </Suspense> </div> </template>

其他Composition API 1. shallowReactive与shallowRefshallowReactive：只处理对象最外层属性的响应式（浅响应式）shallowRef：只处理基本数据类型的响应式，不进行对象类型的响应式处理使用场景：如果有一个对象数据，结构比较深，但变化时只是第一层（外层）属性变化 ---> shallowReactive如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成一个新的对象来替换 ---> shallowRef2. readOnly与shallowReadOnlyreadOnly：让一个响应式数据变为只读的（深只读）shallowReadOnly：让一个响应式数据变为只读的（浅只读）应用场景：不希望数据被修改时（如：使用的数据是别人传过来的）3. toRaw与markRawtoRow：作用：将一个由 reactive 生成的响应式对象转为普通对象使用场景：用于读取响应式对象对应的普通对象，对这个普通普通对象的所有操作，不会引起页面更新markRaw：作用：标记一个对象，使其永远不会成为响应式对象应用场景：有些值不应被设置为响应式的，如复杂的第三方类库当渲染的对象是不可变数据源的复杂/大列表时，跳过响应式转换可以提高性能4. customRef作用：自定义 ref ，并对其依赖项跟踪和更新触发进行显示控制实现防抖效果：<template> <br> <input type="text" v-model="keyWord"> <h3>{{keyWord}}</h3> </template> <script> import {customRef, ref} from "vue"; export default { name: 'MyDemo', setup() { //数据 //Vue提供的ref //let keyWord = ref('你好') function myRef(value, delay) { return customRef((track, trigger) => { let timer return { get() { console.log(`有人从自定义的myRef容器中读取了数据，value:[${value}]`) //通知Vue追踪value的变化 track() //2.读取 return value }, set(newValue) { console.log(`有人修改了自定义myRef容器中的数据，newValue:[${newValue}]`) clearTimeout(timer) timer = setTimeout(() => { //1.设置值 value = newValue //3.通知Vue重新解析模板 trigger() }, delay) } } }) } //使用自定义的ref let keyWord = myRef('你好', 500) return { keyWord } } } </script> <style scoped> </style>5. provide与inject作用：实现祖组件与后代组件间的通信实现：<!-- 祖组件 --> setup() { ...... let car = reactive({name: '马自达', price: '10w'}) //给后代组件传递数据 provide('car', car) ...... } <!-- 后代组件 --> setup() { ...... let car = inject('car') return {car} ...... }6. 响应式数据的判断isRef：检查是否是 ref 对象isReactive：检查是否是 reactive 对象isReadOnly：检查一个对象是否是由 readOnly 创建的只读代理对象isProxy：检查一个对象是否是由 reactive 或 readOnly 创建的代理对象

常用Compsition API 1. setupVue3.0中一个新的配置项，值为一个函数，组件中所用到的数据、方法等均配置在setup中，有两种返回结果：（1）返回一个对象：则对象中的属性、方法可以直接在模板中使用（常用）（2）返回一个渲染函数：可以自定义渲染内容（3）注：setup 不能是一个 async 函数，因为返回值不再是 return 的对象，而是 Promise，模板看不到 return对象中的属性（后期可以是返回 Promise 实例，但需要 Suspense 和异步组件的配合）2. ref函数作用：定义一个响应式的数据语法：const xxx= ref(initValue)创建一个包含响应式数据的引用对象（reference对象，简称ref对象）在js中操作ref对象：xxx.value在模板中读取时不需要手动写.value，直接{{xxx}}补充：接收的数据可以是基本类型，也可以是对象类型基本类型数据：响应式依然通过 Object.defineProperty() 的 get 与set 完成对象类型的数据：内部求助Vue3.0的 reactive 函数来实现3. reactive函数作用：定义一个对象类型的响应式数据（基本类型使用ref）语法：const 代理对象 = reactive(源对象) 接收一个对象或数组，返回一个代理对象（即Proxy的实例对象，简称Proxy对象）reactive 定义的响应式数据是深层次的内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作4. Vue3.0的响应式实现原理：通过Proxy（代理）：拦截对象中任意属性的变化（增删查改）通过Reflect（反射）：对源对象的属性进行操作Demo//源数据 let person = { name: '孙笑川', age: 33 } const p = new Proxy(person, { //读取时调用 get(target,propName) { console.log(`p身上的${propName}属性被读取了`) return Reflect.get(target, propName) }, //修改/追加时调用 set(target,propName,value) { console.log(`p身上的${propName}属性被修改了，执行页面更新`) Reflect.set(target, propName, value) }, //删除时调用 deleteProperty(target, propName) { console.log(`p身上的${propName}属性被删除了，执行页面更新`) return Reflect.deleteProperty(target, propName) } })5. reactive与ref的区别从定义数据的角度ref 定义基本数据类型reactive 定义对象或数组类型ref也可以定义对象或数组类型，底层会通过 reactive转为代理对象从原理的角度分析ref 通过 Object.defineProperty() 的 get 与 set 方法来实响应式（数据劫持）reactive 通过 Proxy 来实响应式（数据劫持），并通过 Reflect 操作源对象内部的数据从使用角度ref 定义的数据：操作数据时需要 .value，在模板中使用时不需要 .valuereactive 定义的数据：操作时直接使用即可6. setup的两个注意点setup执行的时机在 beforeCreate 之前执行一次，this 是 undefinedsetup的参数props：值为对象，包含组件外部传递过来，且组件内部声明接收了的属性context：上下文对象attrs：值为对象，包含组件外部传递过来，但没有在 props 配置中声明的属性，相当于 this.$attrsslots：收到的插槽内容，相当于 this.$slotsemit：分发自定义事件的函数，相当于 this.$emit7. computed函数与Vue2.x中一致示例：import {computed, reactive} from "vue"; export default { name: 'MyDemo', setup() { //数据 let person = reactive({ firstName: '孙', lastName: '笑川' }) //计算属性（简写） // person.fullName = computed(() => { // return person.firstName + '-' + person.lastName // }) //计算属性（完整写法） person.fullName = computed({ get() { return person.firstName + '-' + person.lastName }, set(value) { const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) return { person } } }8. watch函数与Vue2.x中一致注意：监视 reactive定义的响应式数据时，oldValue 无法正确获取，强制开启了深度监视（deep配置失效）监视 reactive定义的响应式数据中的某个属性（对象）时：deep 配置有效//情况一：监视ref定义的一个数据 watch(sum, (newValue, oldValue) => { console.log('sum变了',newValue, oldValue) }) //情况二：监视ref定义的多个数据 watch([sum, msg], (newValue, oldValue) => { console.log('sum变了', newValue, oldValue) }, {immediate:true}) /* 情况三：监视reactive定义的一个数据中的全部属性 注意：1.此处无法正确获取oldValue 2.强制开启了深度监视（deep配置无效） */ watch(person, (newValue, oldValue) => { console.log('person变了',newValue, oldValue) }, {deep: false}) //此处的deep配置无效 //情况四：监视reactive定义的一个数据中的某个属性 watch(() => person.name, (newValue, oldValue) => { console.log('person变了',newValue, oldValue) }) //情况五：监视reactive定义的一个数据中的某些属性 watch([() => person.name, () => person.age], (newValue, oldValue) => { console.log('person变了',newValue, oldValue) }) //特殊情况 watch(() => person.job, (newValue, oldValue) => { console.log('person变了',newValue, oldValue) }, {deep:true}) //此处由于监视的是reactive定义的对象中某个属性，所以deep配置有效9. watchEffect函数watch与watchEffect的区别：watch 既要指明监视的属性，也要指明监视的回调watchEffect 无需指明监视的属性，在监视的回调中用到哪个属性，那就监视哪个属性watchEffect与computed相似：computed 注重计算出来的值（回调函数的返回值），必须写返回值watchEffect 更注重过程（回调函数的函数体），不用写返回值//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调 watchEffect(() => { const a = sum.value const b = person.job.j1.salary console.log('watchEffect配置的回调执行了') })10. 生命周期<script> import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue"; export default { name: 'MyDemo', setup() { //数据 let sum = ref(0) //通过组合式API的形式使用 onBeforeMount(() => { console.log('---onBeforeMount---') }) onMounted(() => { console.log('---onMounted---') }), onBeforeUpdate(() => { console.log('---onBeforeUpdate---') }), onUpdated(() => { console.log('---onUpdated---') }), onBeforeUnmount(() => { console.log('---onBeforeUnmount---') }), onUnmounted(() => { console.log('---onUnmounted---') }) return { sum } }, //通过配置项的形式使用生命周期钩子 /* beforeCreate() { console.log('---beforeCreate---') }, created() { console.log('---created---') }, beforeMount() { console.log('---beforeMount---') }, mounted() { console.log('---mounted---') }, beforeUpdate() { console.log('---beforeUpdate---') }, updated() { console.log('---updated---') }, beforeUnmount() { console.log('---beforeUnmount---') }, unmounted() { console.log('---unmounted---') } */ } </script>11. 自定义hook函数本质是一个函数，把 setup 中使用的Composition API进行了封装类似于Vue2.x中的mixin优势：代码复用，逻辑清晰12. toRef作用：创建一个 ref 对象，其 value 值指向一个对象中的某个属性语法：const name = toRef(person, 'name')应用：要将响应式对象中的某个属性单独提供给外部使用时扩展：toRef 与 toRefs 功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

Router路由 概念：一个路由（route）就是一组映射关系（key - value，key为路径，value为组件），多个路由需要路由器（router）进行管理1. 基本使用（1）安装（以vue2为例）：npm i vue-router@3（2）使用插件：Vue.use(VueRouter)（3）路由配置：//路由配置 import VueRouter from 'vue-router' import About from '@/components/About' import Home from '@/components/Home' export default new VueRouter( { routes: [ { path: '/about', component: About }, { path: '/about', component: Home } ] })（3）路由切换：<router-link class="list-group-item" active-class="active" to="/about">About</router-link>（4）指定页面展示位置：<router-view></router-view>2. 几个注意点（1）路由组件一般放在views文件夹，一般组件放在components文件夹（2）通过切换，“隐藏”了的路由组件会被销毁，需要的时候再挂载；（3）每个路由组件都有自己的$route属性，存储对应的路由信息；（4）整个应用只有一个router3. 嵌套路由（1）使用children配置项：export default new VueRouter( { routes: [ { path: '/about', component: About }, { path: '/home', component: Home, children: [ { //子路由之前不写左斜杠“/” path: 'news', component: News }, { path: 'message', component: Message } ] } ] })（2）跳转（要写全路径）<router-link class="list-group-item" to="/home/news">News</router-link>4. 路由的query参数（1）传递参数<!-- 跳转路由并携带query参数，to的字符串写法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <!-- 跳转路由并携带query参数，to的对象写法 --> <router-link :to="{ path: '/home/message/detail', query: { id: m.id, title: m.title } }"> {{m.title}} </router-link>（2）接收参数this.$route.query.id this.$route.query.title5. 命名路由（1）作用：简化路由的跳转（2）基本使用：命名{ path: '/home', component: Home, children: [ { //子路由之前不写左斜杠“/” path: 'news', component: News }, { path: 'message', component: Message, children: [ { name: 'detail', path: 'detail', component: Detail, } ] } ] }简化跳转<!-- 简化前 --> <router-link to="/home/message/detail">详情</router-link> <!-- 简化后，直接通过名字跳转 --> <router-link :to="{name:'detail'}">详情</router-link> <!-- 简化写法携带参数 --> <router-link :to="{ name: 'detail', query: { id: m.id, title: m.title } }">详情</router-link>6. 路由的params参数（1）配置路由，声明接收params参数{ path: '/home', component: Home, children: [ { //子路由之前不写左斜杠“/” path: 'news', component: News }, { path: 'message', component: Message, children: [ { name: 'detail', //使用占位符声明接收params参数 path: 'detail/:id/:title', component: Detail, } ] } ] }（2）传递参数（携带params时，必须使用路由名字，不能使用路径）<!-- 跳转路由并携带params参数，to的字符串写法 --> <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">详情</router-link> --> <!-- 跳转路由并携带params参数，to的对象写法 --> <router-link :to="{ name: 'detail', //携带params时，必须使用路由名字，不能使用路径 params: { id: m.id, title: m.title } }">详情</router-link>（3）接收参数this.$route.params.id this.$route.params.title7. 路由的props参数作用：方便路由组件接收参数{ path: 'message', component: Message, children: [ { name: 'detail', path: 'detail', component: Detail, //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件 //props: {a:1,b:"B"} //props的第二种写法，值为布尔值，若值位真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件 //props: true //props的第三种写法，值为函数 /* props({$route}) { return { id: $route.query.id, title: $route.query.title, } } */ //简写 props({query:{id,title}}) { return { id,title } } } ] }8. <router-link>的replace属性（1）作用：控制路由跳转时操作浏览器历史记录的模式（2）浏览器历史记录有两种写入方式（默认为push）：push：追加历史记录replace：替换当前记录（3）使用：<router-link replace></router-link>9. 编程式路由导航（1）作用：不借助<router-link>实现路由跳转（2）使用：<!-- push --> this.$router.push({ name: 'detail', query: { id: m.id, title: m.title } }) <!-- replace --> this.$router.replace({ name: 'detail', query: { id: m.id, title: m.title } }) <!-- 前进 --> this.$router.back() <!-- 后退 --> this.$router.forward() <!-- 前进/后退x步（x步长） --> this.$router.go(x)10. 缓存路由组件（1）作用：让不展示的路由组件保持挂载，不销毁（2）使用：<!--1.考虑要缓存的路由在哪个组件展示 2.include写的必须是组件名 3.缓存多个组件时使用双向绑定和数组形式即可，:inclue="['x','y']" --> <keep-alive include="MyNews"> <router-view></router-view> </keep-alive>11. 两个新的生命周期钩子（1）作用：路由组件所独有，用于捕获路由组件的激活状态（2）activated：路由组件激活时被触发​ deactivated：反之，路由组件失活时被触发（3）标题淡化Demo：//激活 activated() { console.log('News组件激活') this.timer = setInterval(() => { console.log('@') this.opacity -= 0.01 if (this.opacity <= 0) { this.opacity = 1 } }) }, //失活 deactivated() { console.log('News组件失活') clearInterval(this.timer) }12. 路由守卫（1）作用：对路由进行权限控制（2）分类：全局、独享、组件内守卫（3）全局守卫//全局前置路由守卫，初始化及每次路由切换之前被调用 router.beforeEach((to, from, next) => { console.log('前置路由守卫', to, from) //鉴权 if (to.meta.isAuth) { if (localStorage.getItem('token') === '1') { next() } else { alert('暂无查看权限！') } } else { next() } }) //全局后置路由守卫，初始化及每次路由切换之后被调用 router.afterEach((to, from) => { console.log('后置路由守卫', to, from) document.title = to.meta.title || 'Vue2 Demo' })（4）独享路由守卫beforeEnter(to,from,next) { console.log('独享路由守卫', to, from) //鉴权 if (to.meta.isAuth) { if (localStorage.getItem('token') === '1') { next() } else { alert('暂无查看权限！') } } else { next() } }（5）组件内守卫//通过路由规则，进入该组件时被调用 beforeRouteEnter(to, from, next) { console.log('About组件beforeRouteEnter', to, from) //鉴权 if (to.meta.isAuth) { if (localStorage.getItem('token') === '1') { next() } else { alert('暂无查看权限！') } } else { next() } }, //通过路由规则，离开该组件时被调用 beforeRouteLeave(to, from, next) { console.log('About组件beforeRouteLeave', to, from) next() }13. 路由器的两种工作模式（1）hash值：#号及其后面的内容（2）hash值不会包含在HTTP请求中，即hash值不会带给后台服务器（3）hash与history的区别：hash值地址栏会带着#号，兼容性好history模式地址干净美观，兼容性相较于hash略差，项目上线部署时需解决刷新404的问题