VUEX and router

简化vuex的写法，从而提高开发效率：
 1.简化state
     第一步：引入import { mapState } from 'vuex'
     第二步：在computed中添加mapState

         computed:{
                ...mapState(['count','name','token']),
                //当然也可以添加其他的计算属性
      },

 2.简化actions:
 
    第一步：引入mapAction 
        import { mapActions } from 'vuex';
     第二步：在methods中添加mapActions;

    例如：
    
         methods:{
                ...mapActions([ 'go' ,'play']),
                goToB() {
                  //this.$store.dispatch('go',this.index)
                   this.go(this.index);
                   this.play();
                }
            }

如何获取modules中的数据状态
八、路由
路由懒加载：优化减少找包文件体积，用到时才加载其中组件的js

老版本： r => require.ensure([], () => r(require('要加载的组件路径')), '插入到页面的js名称')
新版本：const 组件名= () => import('.要加载的组件路径')

九：各种钩子函数

十：手机测试

==============vue路由=====================================

一、路由是什么：主要用于实现单页应用（SPA）的技术

二、路由的实现原理：主要利用url的hash（#）和H5新增的history实现的

参考文章：
https://segmentfault.com/a/1190000007238999?utm_source=tag-newest
https://segmentfault.com/a/1190000011967786

三、vue路由实现

1. 跳转方式：标签，js方式

   1.router-link
   2.$route.push()或replace()

 注意：vue路由必须要先从路由配置文件开始入手

2.组件展示：router-view

四、组件css的局部作用域
五、使用less或sass

1.安装：
       less:  npm install less less-loader --save
       sass:  npm insall sass-loader node-sass --save
2.在组件的style上添加lang

    <style lang="less" scoped>
    @w:100%;
    .hd {
        width:@w;
    } 
        
    </style>

3.如何高亮显示

例如：

    //4.实例化路由
    const router = new VueRouter({
        routes,
        linkExactActiveClass:'active'
    })

六、如何引入svg sprites

七、路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

格式：const 组件名=()=>import('组件路径');

       例如：    const shopping = () => import('../pages/shopping')

八：编程式路由

this.router.replace()

slot:插槽

路由传参
路由守卫:
1.路由内置的钩子
beforeEnter
例如：

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            // ...
          }
        }
      ]
    })

2.全局钩子

     第一种：router.beforeEach(to, from) => {
      // ...
    })
    第二种：router.afterEach((to, from) => {
      // ...
    })

3.组件内的钩子

    beforeRouteEnter
    beforeRouteUpdate (2.2 新增)
    beforeRouteLeave



    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }