Vue生命周期钩子，路由。

Vue生命周期

• Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
• beforeCreate 这是遇到的第一个生命周期函数

 beforeCreate(){ 
     // 表示实例被完全创造出来之前，会执行他
     // console.log(this.msg)
     // 注意：在beforeCreate 生命周期函数执行的时候 data 和 methoods 中的数据还没有初始化
 }

• created 这是遇到的第二个生命周期函数 （重要)

created(){ 
    console.log(this.msg)
    this.show()
    // 在created 中，data 和methods 都已经初始化好了
    // 如果要操作methods 中的方法，data中的数据。最早，只能在 created中操作
}

• beforeMount 这是第三个生命周期函数,表示模板已经在内存中编辑完成，但尚未把模板挂载到页面

beforeMount(){ 
    // console.log(document.getElementById("pp").innerText)
    // 在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些字符串模板
}

• mounted 这是遇到的第四个生命周期函数（重要）,表示内存中的模板，已经挂载到页面中，用户可以看到渲染好的页面了

mounted(){ 
    //console.log(document.getElementById("pp").innerText)
    // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完mouted就表示实例已经被完全创建好了
    // 如果要操作页面上DOM节点，最早在 mounted 中操作
    // 执行完 mounted 就说明已经执行完创建阶段，开始运行阶段
}

接下来是运行中的两个事件

• beforeUpdate 这个时候表示界面还没有更新， 数据肯定更新了

beforeUpdate(){  
    //ole.log("界面上元素内容：" + document.getElementById("pp").innerText)
    //console.log("data 中的 mes 数据是：" + this.msg)
    // 结论 当执行 beforeUpdate 的时候，页面中的显示数据还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步
}

• updated 事件执行的时候页面和data的数据已经保持一致

updated(){
    console.log("界面上元素内容：" + document.getElementById("pp").innerText)
    console.log("data 中的 mes 数据是：" + this.msg)
}

销毁阶段

• beforeDestory Vue实例已经从运行阶段进入到销毁阶段

beforeDestory(){
    // 执行beforeDestory 的时候，实例身上所有data，methods，以及过滤器指令。。都处于可用状态，还没有执行真正的销毁
}

• destoryed 组件已经被完全销毁了

destoryed(){
    // 当执行到destoryed 函数的时候，组件已经被完全销毁了，此时组件中的所有data，methods，指令过滤器都不可用
}

路由

创建路由

• 创建路由对象(new VueRouter)

const router = new VueRouter()

• 设置路由匹配规则(路由对象的routes属性,是一个数组，内部定义规则)

const router = new VueRouter({
    routes: [
      {name: 'index', path: '/index', component: index},
      {name: 'productType', path: '/product_type', component: productType}
      // 记得创建对应组件
    ]
})

• 挂载到vue实例上，并通过router-view渲染

 var vm = new Vue({
        el: '#app',
        // 5. 在vue实例中注入路由，这样整个应用程序都会拥有路由了
        // router: router,
        router,
        data: {
        }
      })
      
 <div id="app">
    // 指定渲染位置
    <router-view></router-view>
 </div>     

路由参数

• 查询字符串方式传参($route.query来接收，无需改变路由规则)

 <router-link to="/login?id=10&name=zs">登录</router-link>
  let login = {
        template: '<h1>登录 --- {{$route.query.id}} ---- {{$route.query.name}} </h1>'
    }

• params传参($route.params来接收，需要更改路由规则)

 <router-link to="/login/10/zs">登录</router-link>
 
     let login = {
        template: '<h1>登录 - {{$route.params.id}} - {{$route.params.name}}</h1>'
    }
 
   let router = new VueRouter({
        routes: [
        // 更改路由规则
            {path: '/login/:id/:name', component: login},
        ]
    })

监听路由参数的变化

• 注意只能同时监听一个路由(即在两个不同路由之间切换会监听不到)

 watch: {
  // to 表示你将要去的路由对象， from表示你从哪个路由对象来
  '$route' (to, from) {
   
  }
}

嵌套路由

• 通过children属性，它是一个数组，数组中放的是对象，每个对象对应一条规则(子路由路径实在父路由基础上，不加‘/’)

 var router = new VueRouter({
        routes: [
          {name: 'index', path: '/index', component: index},
          // 嵌套路由
          {name: 'productType', path: '/product_type/:id', component: productType,
            children: [
              // 嵌套中的path不能加/
              {name: 'cookBook', path: 'cook_book', component: cookBook}
            ]
          }
        ]
      })

路由重定向

• 重定向路由应放在routes路由配置规则数组的最后面，其他路由不匹配则处理相应操作
• {name: 'default', path: '*', redirect: '/index'} path: '*'代表匹配任意内容，refirect: '/index’代表进入/index页面
• {name: 'default', path: '*', redirect: {name: 'index'}} redirect: {name: ‘index’}代表匹配name为index的路由

编程式导航

• 通过 this.$router来实现跳转
• 当某个条件触发时，push一个路由规则this.$router.push({name: 'cookBook'})