vue-router

routes

  1. 利用vue懒加载和webpack的代码分割，可以按需加载router组件，有效优化。
    resolve => require(['../components/main'], resolve)
  2. component 一个组件，对应 name=’default’ 的 router-view，当然，未命名的router-view的默认name就是default， 所以有时候可以省略
  3. components 是组件对象， key对应不同的视图名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

var routes = [
{
    path: '/',
    component: resolve => require(['../components/main'], resolve),
},
{
    path: '/head',
    components:{
        default: resolve => require(['../components/head'], resolve),
        header: resolve => require(['../components/header'], resolve),
        footer: resolve => require(['../components/footer'], resolve)      
    },
    children: [
    {
        path: 'child1',
        components: {
            default: resolve => require(['../components/child1'], resolve)
        }
    },
    {
        path: 'child2',
        component: resolve => require(['../components/child2'], resolve)
    }
    ]
},
{
    path: '/foot',
    components:{
        default: resolve => require(['../components/foot'], resolve),
        header: resolve => require(['../components/header'], resolve),
        footer: resolve => require(['../components/footer'], resolve)      
    }  }

] 

export default new Router({
    routes: routes,
    linkActiveClass: 'route-active'
})

beforeEach

常见的一种场景就是跳转路由的时候，判断是否处于登录状态，如果处于未登录状态，跳转到登录页。

1
2
3
4
5
6
7
router.beforeEach( (to, from, next) => {
    if ( !logined() ){
      next({path: '/login'});
      return ;
    }
    next();
}) ;

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模， 类似于Redux。

  1. state state就是Vuex存储的状态及数据，
  2. getters getters可以理解为计算属性computed， 可以直接返回经过处理后的state数据
  3. mutation mutation是同步事件操作，直接变更state，通过 store.commit 提交事件
  4. action action是异步操作，提交mutation，通过mutation变更state

directives

directives 是指令，有5种指令钩子，可以以指令的形式赋予元素响应事件的功能。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li v-list-style>item</li>
</ul>    

export default {
  directives: {
      listStyle (ele) {
              ele.style.listStyle = 'none';
      }
  }
}

props

组件的参数，由父组件向下传递。
在子组件中用props接收传递的参数， 可以用数组的形式， 更推荐在对象中列出props的类型，可以有效检查错误及增强可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 父组件调用， Boolean类型的border可以直接简写
    <Item :list="list" :msg="msg" border></Item>

export default {
  // props: ['list', 'msg', 'border']
  props: {
      list: {
        type: Array
      },
      msg :{
        type: String
      },
      border: {
          type: Boolean
      }
  }
}