Vue-cli笔记 | Is no tomorrow

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能+模板编译器
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js 配置文件

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh/config/

ref属性

被用来给元素或子组件注册引用信息(id的替代者)
应用在html标签上获取的是真实dom元素，应用在组件标签上是组件实例对象
使用方式
1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

props配置项

功能：让组件接收外部传过来的数据
传递数据： <demo :name="xxx">
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）： props:{name:'String'}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
  1
  2
  3
  4
  5
  6
  7
  props:{
  name:{
  type:String, //类型
  required:true, // 必要性
  default:'老王' // 默认值
  }
  }
可接受的类型
1
2
3
4
5
6
7
8
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
备注： props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若确实需要修改，可复制一份props的内容到data中，然后修改data中的数据

mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合：
1
2
3
4
5
{
data(){},
methods:{},
... ...
}
第二部使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

export default {
  install(Vue, options){
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
  }
}

使用插件：Vue.use(xxx)

scoped样式

作用：让样式在局部生效，防止冲突
写法：<style scoped>

组件拆分案例

组件化编码流程
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
```
 1). 一个组件在用，放在自身即可。
 2). 多个组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）
```
(3).实现交互：从绑定开始
props适用于：
(1). 父组件 ==> 子组件通信
(2). 子组件 =>> 父组件通信（需要父组件先给子组件一个函数，子组件调用时传参）
使用v-model时要切记： v-model绑定的值不能是props传过来的值，因为props不可修改
props传过来的若是对象的值，修改对象中的属性是Vue不会报错，但不推荐这样做

webStorage

存储内容大小一般支持5MB左右（不同浏览器之间可能会有区别）
浏览器端通过 window.sessionStorage 和 window.localStorage属性实现本地存储机制
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器的窗口关闭而消失
2. LocalStorage存储的内容，需要手动清除才会消失
3. xxxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
4. JSON.parse(null) 的结果依然是null

组件的自定义事件

一种组件间通信的方法，适用于：子组件 ===> 父组件
使用场景： A是父组件，B是子组件，B想给A传递数据，就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方法，在父组件中：<Demo @children="parent" />
2. 第二种方法，在父组件中：
  1
  2
  3
  4
  5
  <Demo ref="demo" />
  ...
  mounted(){
  this.$refs.xxx.$on('子组件事件名',this.getData/*父组件自己的方法*/)
  }
3. 若只想让自定义事件触发一次，可以使用once修饰符，或$once方法
触发自定义事件：this.$emit('事件名',要传递的数据)
解绑自定义事件：this.$off('事件名')
组件上也可以绑定原生的dom事件，需要用native修饰符。
注意：通过this.$refs.xxx.$on('子组件事件名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线(GlobalEventBus)

一种组件间通信的方式，适用于任意组件间通信

安装全局事件总线：

new Vue({
  ....,
  beforeCreate(){
    Vue.prototype.$bus = this //安装全局事件总线, $bus就是当前应用的vm
  },
  ....
})

使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
2. 提供数据： this.$bus.$emit('tt',数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

// A组件
methods:{
  demo(data){ ... }
}
... ...
mounted(){
  this.$bus.$on('tt',this.demo)
},
beforeDestroy() {
  this.$bus.$off("tt");
}

// B组件
methods:{
  test(){
    this.$bus.$emit('tt',params)
  }
}

消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信

使用步骤:

安装pubsub：npm i pubsub-js
引入：import pubsub from 'pubsub-js'
接收数据：A组件想接受的数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
提供数据： pubsub.publish('xxx', 数据)

最好在beforeDestroy钩子中,用pubsub.unsubscribe(this.pid)去取消订阅。

// A组件
methods:{
  // 第一个参数是订阅事件的名字
  demo('aaa',data){ ... }
},
... ...
mounted(){
  this.pid = pubsub.subscribe('aaa',this.demo) //订阅消息
},
beforeDestroy(){
  pubsub.unsubscribe(this.pid)
}

// B组件
methods:{
  test(){
    pubsub.publish('aaa',params)
  }
}

nextTick

语法： this.$nextTick(callback)
作用：在下一次 dom 更新结束后执行其指定的回调函数
什么时候用：当改变数据后，要给予更新后的 dom 进行某些操作时，要在nextTick所指定的回调函数中执行

Vue封装的过渡与动画

transition

原理
1. 自动查看目标元素是否应用了CSS过渡或动画，如果有，那么在恰当的时机添加/删除CSS类名
2. 如果trnasition组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用
3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作会立即执行

v-enter-from: 定义过度开始的状态，在元素被插入之前生效，在元素被插入之后的下一帧移除

v-enter-active: 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数

v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效(此时v-enter-from)被移除，在过渡/动画完成之后移除

v-leave-from: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧移除

v-leave-active: 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过度被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数

v-leave-to: 离开过渡的结束状态。在离开过渡被触发之后下一帧生效(此时v-leave-from被删除)，在过渡/动画完成之后移除

<transition name="tt">
    <h2 v-if="isShow">Hello World!</h2>
</transition>
<style>
  .tt-enter-from,
    .tt-leave-to{
        // 变化效果
        opacity: 0
    }
    
    .tt-enter-to,
    .tt-leave-from{
        // 变化效果
        opacity: 1
    }
    
    .tt-enter-active,
    .tt-leave-active{
        transition: opacity 1s;
    }
</style>

class的name命名规则
- 如果使用的是一个没有name的transition。那么所有class都是以v-作为默认前缀
- 如果我们添加了一个name属性，比如<transition name="tt">,那么所有的class都会以tt-开头

自定义过渡class

自定义class的优先级高于普通的类名，可以使用第三方动画库的类名。使用Animate.css 需要手动加上 animate__animated 动画时间类名

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class

leave-to-class

<transition 
   enter-active-class="animate__animated animate__backInDown" 
   leave-active-class="animate__animated animate__backOutUp">
      <h2 v-if="isShow">Hello World!</h2>
</transition>

js动画钩子

before-enter
enter
after-enter
before-leave
leave

after-leave

<transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="Leave"
    @after-leave="afterLeave"
>
    <h2 v-if="isShow">Hello World!</h2>
</transition>

vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"  // 要访问的接口地址(只写到端口)
}

// 发送请求时
axios.get("/school").then()

说明：

优点：配置简单，请求资源时直接发给前端(8080)即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
  devServer:{
    proxy:{
      '/api1': {  //匹配所有以'/api1'开头的请求路径
        target:'http://localhost:5000', // 代理目标的基础路径
        changeOrigin:true,
        pathRewrite: { '^/api1': '' }
      },
      '/api2': {  //匹配所有以'/api1'开头的请求路径
        target:'http://localhost:5001', // 代理目标的基础路径
        changeOrigin:true,
        pathRewrite: { '^/api2': '' }
      }
    }
  }
}
/*
    changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
    changeOrigin设置为false时，服务器收到的请求头中的host为：localhost：8080
    changeOrigin默认值为true
*/
// 发送请求时
axios.get("/api/students").then()

说明：

优点：可以配置多个代理，且可以灵活地控制请求是否走代理
配置略为繁琐。请求资源时必须要加前缀

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

父组件中：
        <Category>
            <div>html结构</div>
        </Category>
子组件中：
        <template>
            <div>
                <!-- 定义插槽 -->
                <slot>默认值，当使用者没有传递具体结构时，标签内的内容会展示在页面上</slot>
            </div>
        </template>

具名插槽：

父组件中：
        <Category>
            <template slot="a">
                <div>html结构</div>
            </template>
            <template slot:b>
                <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
                <!-- 定义插槽 -->
                <slot name="a">默认值，当使用者没有传递具体结构时，标签内的内容会展示在页面上</slot>
                <slot name="b">默认值，当使用者没有传递具体结构时，标签内的内容会展示在页面上</slot>
            </div>
        </template>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用节决定。（games数据在Category组件中，但使用数据所遍历出来的结构由父组件决定）

具体代码：

父组件中：
        <Category>
            <!-- scope 是一个对象，里面存放着子组件通过插槽传过来的数据 -->
            <template scope="scopeData">
                <ul>
                    <li v-for="game in scopeData.games" :key="game"> {{game}} </li>
                </ul>
            </template>
        </Category>

        <Category>
            <!-- 接收数据时可使用解构语法 -->
            <template scope="{ games }">
                <h4 v-for="game in games" :key="game"> {{game}}</h4>
            </template>
        </Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>

        <script>
          export default{
            name:'Category',
            data(){
              return {
                games:["双人成行", "小小梦魇", "冒险岛", "魂斗罗"]
              }
            }
          }
        </script>

Vuex

概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

何时使用？

多个组件需要共享数据时

搭建vuex环境

创建文件：src/store/index.js

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)

// 准备actions对象 ———— 响应组件中用户的动作
const actions = {};
// 准备mutations对象——修改state中的数据
const mutations = {};
// 准备state对象——保存具体的数据
const state = {};

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})

在main.js中创建vm时传入store配置项

...
// 引入store
import store from './store'
...

// 创建vm
new Vue({
  el:'#app',
  render: h => h(App)，
  store
})

基本使用

初始化数据、配置actions、配置mutations，操作文件stroe/index.js

// 引入vue核心库
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vuex
Vue.ues(Vuex)

const actions = {
  // 响应组件中加法的动作
  jia(context, value){
    context.commit('JIA',value);
  }
};

const mutations = {
  JIA(state,value){
    state.sum += value;
  }
}

const state = {
  num: 1
}
//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})

组件中读取vuex中的数据：$store.state.num
组件中修改vuex中的数据：$store.dispatch('actions中的方法', 数据) 或 $store.commit('mutations中的方法名', 数据)

备注：若没有网络请求或其他业务逻辑，可以越过actions直接调用mutations，即不写dispatch,直接调用commit

getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

在store.js中追加getters配置

......

const getters = {
  bigNum(state){
    return state.num * 10
  }
}
//创建并暴露store
export default new Vuex.Store({
  ......
  getters
})

组件中读取数据：$store.getters.bigNum

四个map方法的使用

mapState方法：用于映射state中的数据为计算属性

computed:{
  // 借助mapState生成计算属性：num、school、subject（对象写法）
  ...mapState({num:'num', school:'school', subject:'subject'}),
  // 借助mapState生成计算属性：num、school、subject（数组写法）
  ...mapState(['num','school','subject'])
}

mapGetters方法：用于映射getters中的数据为计算属性

computed:{
  // 借助mapGetters生成计算属性: bigNum(对象写法)
  ...mapGetters({bigNum:'bigNum'})
  // 借助mapGetters生成计算属性: bigNum(数组写法)
  ...mapGetters(['bigNum'])
}

mapActions方法：用于生成与actions对话的方式，即包含$store.dispatch(xxx)的函数

methods:{
  // 靠mapActions生成：incrementOdd、incrementWait（对象形式）
  ...mapActions({ incrementOdd:'jiaOdd', incrementWait:'jiaWait' })
  // 靠mapActions生成：jiaOdd、jiaWait（数组形式）
  ...mapActions(['jiaOdd', 'jiaWait'])
}

mapMutations方法：用于生成与mutations对话的方法，即包含$store.commit(xxx)的函数

// 靠mapActions生成：increment、decrement（对象形式）
...mapMutations({ increment:'JIA', decrement:'JIAN' })
// 靠mapMutations生成：JIA、JIAN（对象形式）
...mapMutations([ 'JIA', 'JIAN' ])

备注：mapActions与mapMutations使用时，如果要传递参数需要在模板中绑定事件时传递参数，否则参数是事件对象。

模块化 + 命名空间

目的：让代码更好维护，让多种数据分类更加明确。

修改: store.js

const countAbout = {
  namespaced: true, // 开启命名空间
  state:{ ... },
  mutations:{ ... },
  actions:{ ... },
  getters:{
    bigNum(state){
      return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced: true, // 开启命名空间
  state:{ ... },
  mutations:{ ... },
  actions:{ ... }
}

export default  new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

开启命名空间后，组件中读取state数据：

// 方式一：自己直接读取
this.$store.state.personAbout.list
// 方式二：借助mapState读取：
...mapState('countAbout', ['num','school','subject'])

开启命名空间后，组件中读取getters数据：

// 方式一：自己直接读取
//                    命名空间名  /  属性名
this.$store.getters['personAbout/firstPersonName']
// 方式二：借助mapGetters读取：
...mapGetters('countAbout', ['bigSum'])

开启命名空间后，组件中调用dispatch

 //方式一：自己直接dispatch
//                      命名空间名  /  方法名       , 参数
 this.$store.dispatch('personAbout/addPersonWang',person)
 //方式二：借助mapActions：
 ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

 //方式一：自己直接commit
//                    命名空间名  /  方法名    , 参数
 this.$store.commit('personAbout/ADD_PERSON',person)
 //方式二：借助mapMutations：
 ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

路由

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。

基本使用

安装vue-router ：npm i vue-router
main.js中引入VueRouter: import VueRouter from 'vue-router'
应用插件：Vue.use(VueRouter)

编写router配置项：

/*
  src/router/index.js
  该文件专门用于创建整个应用的路由器
*/
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由 组件
import About from '../components/About'
import Home from '../components/Home'

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/about',
      component:About
    }
  ]
})
export default router

实现切换（active-class可配置高亮样式）

1	<router-link active-class="active" to="/about">About</router-link>

指定展示位置
1
<router-view></router-view>

几个注意点

路由组件通常放在pages/views文件夹，一般组件通常放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由（多级路由）

配置路由规则，使用children配置项：

router:[
  {
    path:'/about',
    component:About
  },
  {
    path:'/home',
    component:Home,
    children:[  // 通过children配置子集路由
      {
        path:'news',  // 子级路由一定不要写斜线，不要写成'/news'
        component: News
      },
      {
        path:'message', // 子级路由一定不要写斜线!!!
        component: Message
      }
    ]
  }
]

跳转（要写完整的路径,从一级路由一级一级向下找）：
1
<router-link to="/home/news">News</router-link>

路由的query参数

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/message/detail?id=666&msg=hello"></router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
  :to="{
    path:'/home/message/detail',
    query:{
      id:666,
      msg:'hello'
    }
  }"
>跳转</router-link>

接受参数：
1
2
$route.query.id
$route.query.msg
特别注意：若传递的参数是对象，页面刷新后数据会丢失，传参时可以使用JSON.stringify()避免该问题, 普通值不会丢失

命名路由

作用：可以简化路由的跳转
如何使用

给路由命名：

{
  path:'/demo',
  component:Demo,
  children:[
    {
      path:'test',
      component:Test,
      children:[
        {
          name:'hello',  // 给路由命名
          path:'welcome',
          component: Hello
        }
      ]
    }
  ]
}

简化跳转

<!-- 简化前，需要写完整路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to={name:'hello'}">跳转</router-link>
<!-- 简化写法配合传递参数 -->
<router-link
  :to={
    name:'hello',
    query:{
      id:666,
      msg:'hello'
    }
  }"
>跳转</router-link>

路由的params参数

配置路由，声明接收params参数

{
  path:'/home',
  component:Home,
  children:[
    {
      path:'news',
      component:News
    },
    {
      path:'message',
      component:Message,
      children:[
        {
          name:'detail',
          path:'detail/:id/:msg',  // 使用占位符声明接收params参数
          component: Detail
        }
      ]
    }
  ]
}

传递参数

<!-- 跳转并携带params写法，to的字符串写法 -->
<router-link :to="/home/message/detail/666/hello">跳转</router-link>

<!-- 跳转并携带params写法，to的字符串写法 -->
<router-link
  :to="{
    name:'detail',
    params:{
      id:666,
      msg:'hello'
    }
  }"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项

接收参数：
1
2
$route.params.id
$route.params.msg
特别注意：若传递的参数是对象，页面刷新后数据会丢失，传参时可以使用JSON.stringify()避免该问题, 普通值不会丢失

路由的props配置

作用：让路由组件更方便的接收到参数

{
  name:'detail',
  path:'detail/:id',
  component:Detail,
  // 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
  //  props: { a:1 }

  // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
  // 缺点: 不能接受query参数
  // props: true

  // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
  props(route){
    return {
      id:route.query.id,
      msg: route.query.msg
    }
  }
  /* props({ query }) {
    return {
      id: query.id,
      title: query.title
    }
  } */
  /* // 解构赋值连续写法
  props({ query: { id, title } }) {
    return {
      id: id,
      title: title
    }
  } */
}

`<router-link>` 的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写法：分别为push和replace，push 是追加历史记录，replace是替换当前记录。路由跳转的时候默认为push
如何开启replace模式： <router-link replace ......>跳转</router-link>

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活

具体编码：

// $router 的API
this.$router.push({
  name:'detail',
  params:{
    id:'xxx',
    msg:'xxx'
  }
})

this.$router.replace({
  name:'detail',
  params:{
    id:'xxx',
    msg:'xxx'
  }
})
this.$router.forward() // 前进
this.$router.back()  // 后退
this.$router.go()  //可前进也可后退

缓存路由组件

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

具体编码：

<keep-alive :include="组件名(组件name保存的名字)">
  <组件名></组件名>
</keep-alive>
include: string | RegExp| Array。只有名称匹配的组件会被缓存；
exclude: string | RegExp| Array。任何名称匹配的组件都不会被缓存；
max: number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁

缓存组件独有的生命周期，用于捕获路由组件的激活状态
activated 组件激活时触发的钩子
deactivated 组件失活时触发的钩子

路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫：

// router/index.js 文件内编写

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach( (to, from, next)=>{
  console.log('beforeEach',to,from)
  if(to.meta.isAuth){  // 判断当前路由是否需要进行权限控制
    // 逻辑操作
    next() // 放行
  }else{
    next({name:'home'})  // 重定向
    // throw new Error()
  }
})
// 全局后置守卫： 初始化时执行、每次路由切换后执行
router.afterEach( (to, from)=>{
 //  to : 到哪去 ； from 从哪来   
  console.log('afterEach', to, from)
  if(to.meta.title){  // 判断当前路由是否需要进行权限控制
    document.title = to.meta.title  // 修改网页的title
  }else{
    document.title = 'xxx'
  }
})

独享守卫：

// router/index.js 文件内编写
beforeEnter(to, from, next){
  console.log('beforeEnter',to,from)
  if(to.meta.isAuth){  // 判断当前路由是否需要进行权限控制
    // 逻辑操作
    next() // 放行
  }else{
    next({name:'home'})  // 重定向
    // throw new Error()
  }
}

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

对于一个url来说，什么事hash值？ ———— #及其后面的内容就是hash值
hash值不会包含在HTTP请求中，即：hash值不会带给服务器
hash模式：
1. 地址中带有#号，不美观
2. 若以后将地址通过第三方手机app分享，如果app校验严格，则地址会被标记为不合法
3. 兼容性较好
history模式：
1. url地址没有 #
2. 兼容性与hash模式相比略差
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404问题

脚手架文件结构

关于不同版本的Vue

vue.config.js 配置文件

ref属性

props配置项

mixin(混入)

插件

scoped样式

组件拆分案例

webStorage

组件的自定义事件

全局事件总线(GlobalEventBus)

消息订阅与发布（pubsub）

nextTick

Vue封装的过渡与动画

transition

自定义过渡class

js动画钩子

vue脚手架配置代理

方法一

方法二

插槽

Vuex

概念

何时使用？

搭建vuex环境

基本使用

getters的使用

四个map方法的使用

模块化 + 命名空间

路由

基本使用

几个注意点

多级路由（多级路由）

路由的query参数

命名路由

路由的params参数

路由的props配置

<router-link> 的replace属性

编程式路由导航

缓存路由组件

路由守卫

路由器的两种工作模式

`<router-link>` 的replace属性