Vue实例从创建到销毁的过程，就是生命周期。 也就是从开始创建、初始化数据、编译模板、挂在DOM—>渲染、 更新->渲染、卸载一系列等过程，我们称之为Vue的生命周期。

beforeCreate: 是new Vue()之后触发的第一个钩子，在当前阶段data,methods，computed以及数据和方法都不能访问。

created: 在实例创建完成后发生， 当前阶段已经完成了数据观测，也就是可以使用数据，更改数据。在这个更改数据不会触发updated函数。可以做一些初始化数据的获取，在当前阶段无法与DOM进行交互，如果非要想，可以通过vm.$nextTick来访问DOM。

beforeMount：发生在挂载之前，在这之前template模板已经导入渲染好的函数编译。当前阶段虚拟DOM已经创建完成，即将开始渲染。在此阶段可以对数据进行更改，不会触发updated。

mouted: 在挂在完成后发生的，在当前阶段，真实的DOM挂载完毕，数据完成双向绑定，可以访问到DOM节点，使用$refs属性对DOM进行操作。

beforeUpte: 发生在更新之前，也就是响应式数据发生更新，虚拟DOM重新渲染之前被触发，在当前阶段进行数据更改，不会造成重新渲染。

updated: 发生在更新完成之后，当前组件的DOM已经更新完成。要注意的是避免在此期间更改数据，因为可能会导致无线循环的更新。

beforeDestroy: 发生在销毁实例之前，在当前阶段实例完全可以使用，我们可以在此阶段清除定时器等操作。

destorted: 发生在实例销毁之后，这个时候只剩下一个空的DOM空壳。组件已经被拆解，数据绑定被卸除，监听被移除，子实例也统统被销毁。

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成更好的逻辑。

它总共可以分为8个阶段： 创建前/后，载入前/后，更新前/后，销毁前/后。

第一次加载时会触发beforeCreate、created、beforeMount、mounted。

DOM渲染在mounted中就已经完成了。

beforeCreate: 可以加载loading事件，在加载实例时触发；

created：初始化完成时的时间写在这里，如在结束loading事件，异步请求也事宜在这里调用；

mounted: 挂在元素，获取DOM节点；

updated： 如果对数据统一处理，这里写相应的函数

beforeDestroy: 可以一个确认停止事件的确认框

nextTick: 更新数据后立即操作DOM

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到credted中。

组件的调用顺序都是先父后子, 渲染完成的顺序时先子后父；

组件的销毁操作时先父后子， 销毁完成的顺序时先子后父；

加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程 父 beforeUpdate -> 父 updated

销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

参考文章： blog.csdn.net/mikon_0703/…

（1）vm.$forceUpdate

作用： 强迫Vue.js实例重新渲染，仅仅影响实例本身及插槽内容的子组件，而不是所有的子组件。

（2）vm.$destory

作用： 完全销毁一个实例，清理该实例与其他实例的连接，并解绑其全部指令和监听器，同时触发beforeDestory和destroyed钩子函数。

（3）vm.$nextTick

作用： 将回调延迟到下次DOM更新循环之后执行，在执行数据后立即执行，然后等待DOM更新。

（4）vm.$mount

作用： 如果Vue实例在实例化时没有收到el选项，则它处于"未挂在"状态，用vm.$mount()手动地挂载一个未挂载的实例。

路由就是SPA(单页应用)的路径管理器，适合用于构建单页面应用。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

传统的页面应用，是一些超链接来实现页面切换和跳转的。

在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

<router-link ></router-link>
<router-view></router-view>

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换。

在router目录下的index.js文件中，对path属性加上/:id

使用route对象的params.id，例如： this.$toute.params.id.

vue-router的导航钩子，主要用来作用是拦截导航，让他完成跳转或者取消。

有三种方式可以植入路由导航过程中：

• 全局的
• 单个路由独享的
• 组件级的 全局导航钩子主要有3种钩子： 前置守卫、全局解析守卫、后置钩子。

4.1全局钩子

（1）注册一个全局的前置守卫：

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    // do someting
});

to: 代表要进入的目标，它是一个路由对象

from: 代表正要离开的路由，也是一个路由对象

next: 这是一个必须要调用的方法，而具体的执行效果则依赖next方法调用的参数（next函数必须调用）

注意： next(): 进行管道中的下一个钩子。

next(false): 中断当前的导航。

next('/')和next({path:'/list'}): 跳转到一个不同的地址。当前导航被终端，然后进行一个新的导航。

（2）全局解析守卫

const router = new VueRouter({ ... });
router.beforeResolve((to, from, next) => {
    // do someting
});

和router.beforeEach类似，区别是在导航确认之前，同时在所有的组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

（3）全局后置钩子 和路由守卫不同的是，不会接受next函数，也不会改变导航本身：

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

4.2路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4.3组件内的守卫

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

router 为Vue-router的实例，是一个全局的路由对象，包含了路由的跳转的方法、钩子函数等等。

route 是路由信息对象|跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象， 包含了path、params、query、matched、name等路由信息参数。

(1)用watch检测

watch:{
  $route(to, from){
     console.log(to.)
  }
}

(2)组件内导航钩子函数

boforeRouterUpdate(to, from, next){     
}

7.1 params传参：

• 只能用name,不能使用path;
• (2) 参数不回显示在路径上；
• (3) 浏览器强制刷新参数会被清空；

// 传递参数
  this.$router.push({
    name: Home，
    params: {
        number: 1 ,
        code: '999'
    }
  })
  // 接收参数
  const p = this.$route.params

7.2 query传参

• 参数会显示在路径上，刷新不回被清空
• name可以使用path路径

    
// 传递参数
this.$router.push({
  name: Home，
  query: {
  number: 1 ,
  code: '999'
}
})
// 接收参数
const q = this.$route.query

hash——比如这个 URL：www.abc.com/#/hello，has… 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持） 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的适合才加载对应组件，这样就更加高效了，结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。

9.1 第一种写法：使用AMD风格的require

const Foo = resolve => require(['./Foo.vue'], resolve)；
const routers = [
    {
        path: '/',
        name: 'index',
        component: (resolve) => require(['./views/index.vue'], resolve)
    }
]

9.2 第二种写法： 使用import

const Index = () => import('@/components/Two');
const routers = [
    {
        path: '/',
        name: 'index',
        component: Index
    }
]

9.3第三种写法： 使用webpack特有的require.ensure().

const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
    {
        path: '/',
        name: 'index',
        component: Index
    }
]

重定向也是通过routes配置完成，下面例子是从/a重定向到/b:

const router = new VueTouter({
   routes:[
      {
          path:'/a', redirect:'/b'
      }
   ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueTouter({
   routes:[
      {
          path:'/a', redirect:{name: 'foo}
      }
   ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

由于路由是从上到下执行的，只要在路由配置中最后面放个*号就可以了。

{
    path: '*',
    name: 'notfount',
    component: notfount
}

当创建一个Router实例，你可以提供一个scrollBehavior方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior方法接收to 和from路由对象。第三个参数savePosition当且仅当popstate导航时才可以用。

在使用vue进行开发的时候，我们会发现地址栏上的ip后面会跟着几个#号，如果向去掉这个#号，我们可以在路由上加上mode: 'history’，即可去掉。

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    }]
})

（1）vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次；

（2）vue-router使用diff算法，实现按需加载，减少dom操作；

（3）vue-router是路由跳转或同一个页面跳转；location.href是不同页面跳转；

（4）vue-router是异步加载this.$nextTick( () => (获取url)); location.href是同步加载。

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

只需要在@click后面加上native就可以了.

<router-link @click.native="change">
  <span>{{item.text}}</span>
</router-link>

• 方法一：只用a标签，不适用button标签；
• 方法二：使用button标签和Router.navigate方法