目前前端三大主流框架为vue.js，angular，react,而相对初学者来说，vue相对来说说入门比较简单，中小型公司用的比较多，而后两者入门相对不较难，主要用于中大型公司项目中。

接下来为大家介绍vue中经常用到的功能模块

Vue-router

主要用于路由管理的继承

功能主要为：

嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为

主要用法

{ name: 'passenger-flow',         path: '/brand/passenger-flow',         meta: { title: '品牌客流' },         component: import('@/views/brand/brand-list'),         children: [           {             name: 'brand-real-time',             path: '/brand/passenger-flow/real-time',             meta: { title: '实时客流' },             component: () => import('@/views/brand/passenger-flow/real-time')           }, redirect:'XXXXXX' }

name:主要是路由名称，可通过路由名称跳转，例如：this.$router.push({name:xxxx})

path:路由页面的地址，例如浏览器地址栏后面的地址，例如：http://www.baidu.com/xxx/xxx

meta:主要用于配置一些特定参数，如权限，页面title等

compont:页面显示的组件，组件可懒加载：()=>import("组件地址")

children:组件的嵌套，可以多级嵌套

redirect:主要用于重定向，访问父组件后默认加载哪个子组件

 

主要钩子函数

beforeEach:

router.beforeEach((to, from, next) => { // ... })

即将进入某个路由前执行的函数

to 即将进入的路由信息，即马上打开的页面

from 上一个页面，即当前这个页面，即将跳转到下一个页面

next 执行的函数

 

beforeAfter

在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后

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

/*第一次写博客，以上只是我个人的理解，说的没有那么官方，如有不对或者理解错误，欢迎交流，不喜勿喷，谢谢*/