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
<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.[图片上传失败...(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`
}
}
