简单遍历vue2.0文档（五）

11. vue-router

11.1 引用

//入口文件
import router from 'vue-router'

11.2 配置路由文件

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

11.3 路由的跳转

//相当于跳转路由的超链接
<router-link :to = '{name:"HelloWord"}'>点我跳转</router-link>

//视图位置
<router-view name='main'></router-view>

//vue-router下的main.js内配置
import HelloWorld from '@/components/HelloWorld'
export default new Router({
  routes: [
    {
      path: '/hello',  //配置路由地址
      name: 'HelloWorld',  //对应router-link里的name
      components: {main:HelloWorld}  //对应main对应router-view里的name，HelloWorld对应import的组件名
    }
  ]
})

11.4 路由的传参

//router-link中用params传参数
<router-link :to = '{name:"HelloWorld",params:{word:msg}}'>点我</router-link>
//router中用:参数名 接收参数
export default new Router({
  routes: [
    {
      path: '/hello/:word',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})
//组件中这样接收
{{ this.$route.params.word }}

11.5 hash模式和history模式

• hash模式：vue-router 默认 hash 模式 —— 使用 URL 的 hash（#xxx） 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有亲求服务器，但是页面状态和url关联起来。
• history模式：当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。 特别注意，history模式需要后台配置支持。

11.6 路由懒加载

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

11.7 导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。导航守卫就是路由跳转过程中的一些钩子函数，如路由跳转前做一些登陆验证等。

12. Axios

12.1 安装和引入

npm install axios
import axios from 'axios'

12.2 全局挂载

Vue.prototype.$axios = axios;

12.3 get请求

this.$axios.get('url',{params:{xxx:yyy}}).then(res){}.catch(){}

13. Vuex

13.1 安装和引入

//安装
npm install vuex

//入口文件引入和注入
import Vuex from 'vuex'
Vue.use(Vuex)
new Vue({
  el: '#app',
  router,
  Vuex,
  components: { App },
  template: '<App/>'
})

13.2 状态管理

//state入口文件内创建全局状态仓库
var store = new Vuex.Store({
  state:{
    XXX：xxx
  }
})

//各自组建内取用
this.$store.state.XXX

13.3 状态改变

mutations：只能包括同步操作

//在全局状态仓库定义改变状态的方法mutations
var store = new Vuex.Store({
  state:{
    XXX：xxx
  },
  mutations:{
    YYY: function(state){}
  }
})
//在各自组建内触发改变状态的方法
this.$store.commit(YYY);

actions：可以包括异步操作

//在全局状态仓库定义改变状态的方法actions
var store = new Vuex.Store({
  state:{
    XXX：xxx
  },
  mutations:{
    YYY: function(state){}
  }，
  actions{
    ZZZ:function(context){
      context.commit(YYY);
  }
}
})
//在各自组建内触发改变状态的方法
this.$store.dispatch(ZZZ);

13.4 派生状态（如过滤）

//在全局状态仓库定义派生状态的方法getters
var store = new Vuex.Store({
  state:{
    XXX：xxx
  },
  mutations:{
    YYY: function(state){}
  }，
  actions{
    ZZZ: function(context){
      context.commit(YYY);
  },
  getters:{
    AAA: function(state){}
  }
}
})
//在各自组建内触发派生状态的方法
this.$store.getters.AAA

14. 深入响应式原理

1. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty 把这些属性全部转为getter/setter。
2. Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set。