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的问题

Vuex 1. 概念实现集中式状态（数据）管理的一个插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式（适用于任意组件间通信）2. 搭建vuex环境安装（以vue2为例）：npm i vuex@3index.jsimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //用于响应组件中的动作 const actions = { } //用于操作数据 const mutations = { } //用于存储数据 const state = { } //创建并暴露store export default new Vuex.Store({ actions,mutations,state })main.jsimport Vue from 'vue' import App from './App.vue' import store from './store' //关闭生产提示 Vue.config.productionTip =false new Vue({ el: '#app', render: h => h(App), store })3. 基本使用（1）配置actions,mutations,stateimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //用于响应组件中的动作 const actions = { increment(context,value) { console.log('actions中的increment被调用') context.commit('INCREMENT', value) }, decrement(context,value) { context.commit('DECREMENT', value) }, incrementOdd(context,value) { if (context.state.sum % 2) { context.commit('INCREMENTODD', value) } }, incrementWait(context,value) { setTimeout(() => { context.commit('INCREMENTWAIT', value) }, 500) } } //用于操作数据 const mutations = { INCREMENT(state,value) { console.log('mutations中的INCREMENT被调用') state.sum += value }, DECREMENT(state,value) { state.sum -= value }, INCREMENTODD(state,value) { state.sum += value }, INCREMENTWAIT(state,value) { state.sum += value } } //用于存储数据 const state = { //当前的和 sum: 0, } //创建并暴露store export default new Vuex.Store({ actions,mutations,state })（2）组件中读取vuex中的数据：$store.state.sum（3）组件中修改vuex中的数据：$store.dispatch('方法名（小写）', 数据) 或 this.$store.commit('方法名（大写）', 数据)​ 注：若没有网络请求或其他业务逻辑，组件中可以跳过actions（即不写dispatch），直接（调用mutations）commit4. getters的使用（1）概念：当state中的数据需要经过加工后再使用时，可以使用getters（2）在store中追加getters配置//用于加工state中的数据 const getters = { bigSum(state) { return state.sum * 10 } } //创建并暴露store export default new Vuex.Store({ actions,mutations,state,getters })（3）组件中读取数据：$store.gettes.bigSum5. 四个map方法的使用（1）mapState（映射state中的属性为计算属性）//借助mapState生成计算属性，从state中读取数据 //对象写法 ...mapState({sum:'sum',school:'school',subject:'subject'}) //数组写法 ...mapState(['sum','school','subject']),（2）mapGetters（映射getters中的数据为计算属性）//借助mapGetters生成计算属性，从getter中读取数据 //对象写法 ...mapGetters({bigSum:'bigSum'}) //数组写法 ...mapGetters(['bigSum'])（3）mapMutations 用于帮助生成与mutations对话的方法，即：包含$store.commit(xxx)的函数//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations //对象写法 ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}), //数组写法 ...mapMutations(['INCREMENT','DECREMENT']),（4）mapActions 用于帮助生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions //对象写法 ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}), //数组写法 ...mapActions(['incrementOdd','incrementWait'])注：使用mapMutations与mapActions 时，若需要传递参数，需要在模板中绑定事件时就传递，否则默认的传参为时间对象6. 模块化、命名空间（1）目的：便于代码维护，数据分类更加明确（2）修改store/index.jsindex.jsimport Vue from 'vue' import Vuex from 'vuex' //求和相关 import countOptions from './count' //人员管理相关 import personOptions from './person' Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ modules: { countOptions, personOptions } })count.jsexport default { //开启命名空间 namespaced: true, actions: { ...... }, mutations: { ...... }, state: { ...... }, getters: { ...... }, }person.jsimport axios from "axios"; import {nanoid} from "nanoid"; export default { namespaced: true, actions: { ...... }, mutations: { ...... }, state: { ...... }, getters: { ...... }, }（3）开启命名空间后：组件读取state数据//方式一：直接读取 this.$store.state.personOptions.personList //方式二：借助map方法 ...mapState('personOptions', ['personList'])组件读取getters数据//方式一：直接读取 this.$store.getters['personOptions/firstPersonName'] //方式二：借助map方法 ...mapGetters('countOptions', ['bigSum'])组件调用dispatch方法//方式一：直接调用 this.$store.dispatch('personOptions/addPerson', personObj) //方式二：借助map方法 //参数在模板中绑定事件时就传递 ...mapActions('countOptions',['incrementOdd','incrementWait'])组件调用commit方法//方式一：直接调用 this.$store.commit('personOptions/ADD_PERSON', personObj) //方式二：借助map方法 //参数在模板中绑定事件时就传递 ...mapMutations('countOptions',{increment:'INCREMENT',decrement:'DECREMENT'}),

过度与动画 作用：再插入、更新或移除DOM元素时，在合适的时候给元素添加样式名语法：（1）准备样式元素进入的样式v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点（2）使用<transition>包裹要过度的元素，并配置name属性<transition name="demo"> <h1 v-show="isShow"> 孙笑川 </h1> </transition>（3）注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都需要指定key值

配置代理 方式一在vue.config.js中添加如下配置：devServer: { proxy: 'http://localhost:5000' }注：（1）该方式配置简单，但不能配置多个代理，且不能灵活的控制请求是否走代理​ （2）当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）方式二devServer: { proxy: { '/api': { target: 'http://localhost:5000', //路径重写 pathRewrite: {'^/api':''}, ws: true, //用于空值请求头中的host值（默认值为true） changeOrigin: true }, '/demo': { target: 'http://localhost:5001', pathRewrite: {'^/demo':''}, ws: true, changeOrigin: true } } }注：可以配置多个代理和灵活的控制请求是否走代理（请求时必须加上前缀）

全局事件总线（GlobalEventBus） 定义：一种组件间的通信方式，适用于任意组件间通信安装全局事件总线new Vue({ ...... beforeCreate() { //安装全局事件总线 Vue.prototype.$bus = this } })使用：（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，且回调留在A组件自身methods: { demo(data) { ...... } } mounted() { this.$bus.$on('xxx', this.demo) }（2）提供数据：this.$bus.$emit('xxx', data)注：最好在beforeDestroy钩子函数中，使用$off('xxx')解绑当前组件所用到的自定义事件

消息订阅与发布（pubsub） 定义：一种组件间的通信方式，适用于任意组件间通信引入：npm i pubsub-js接收数据：methods() { demo(msgName,data) { ...... } } mounted() { //订阅消息 this.pubId = pubsub.subscribe('xxx', this.demo) }提供数据：pubsub.publish('xxx', data)注：最好在beforeDestroy钩子函数中，使用pubsub.unsubscribe(this.pubId)取消订阅

webStorage 存储内容一般5MB左右（不同浏览器之间存在差异）；浏览器端通过window.sessionStorage 或 window.localStorage属性来实现本地存储机制API（1）xxxStorage.setItem(key,value) 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名已存在，会更新其对应的值；（2）xxxStorage.getItem(key) 返回键名对应的值；（3）xxxStorage.removeItem(key) 从存储中删除对应的值；（4）xxxStorage.clear() 清空存储中的所有数据；注：（1）sessionStorage存储的数据会随浏览器关闭而消失；​ （2）localStorage存储的数据需要手动清除；​ （3）xxxStorage.getItem(key) 如果对应的值不存在，则返回null；​ （4）JSON.parse(null)的结果依然为null；

组件的自定义事件 定义：一种组件间的通信方式，适用于：子传父使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）绑定自定义事件：（1）方式一：<Demo @getName="getName"/> 或 <Demo v-on:getName="getName"/>（2）方式二：<Demo ref="getName"/> mounted() { //this.xxx为回调方法 this.$refs.getName.$on('getName', this.xxx) }（3）若想让自定义事件只触发一次，可以使用once修饰符或$once方法触发自定义事件：this.$emit('getName', 参数)解绑自定义事件：解绑一个：this.$off('getName')解绑多个：this.$off(['getName', 'getAge'])组件上可以使用native修饰符绑定原生DOM事件注：通过this.$refs.getName.$on('getName', this.xxx)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数