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/1190000007238999?utm_source=tag-newest)
[https://segmentfault.com/a/1190000011967786](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

3.如何高亮显示


例如：

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


六、如何引入svg sprites

七、路由懒加载

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

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

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


八：编程式路由

this.[图片上传失败...(image-fef81d-1544077326174)]

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`
  }
}

vuex

VUEX and router

你可能感兴趣的:(vuex)