vue生命周期、路由守卫、keep-alive

Vue生命周期

创建阶段

• beforeCreate
         创建阶段的第1个生命周期函数,实例刚刚创建，但没有初始化，组件的props，methods，data尚未被创建，处于不可用。
• created（最早可以发起Ajax请求）
         组件的props，methods，data已创建好，可以使用，但组件的模板结构尚未生成 ，不能操作DOM，！！！（el属性，ref属性此时都为空）
• beforeMount
         内存编译好的HTML结构准备渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构，无法操作DOM
• mounted（最早可以操作DOM）
          已经渲染内存的HTML结构到浏览器中，包含了当前组件的DOM结构，可以操作DOM。

运行阶段（根据数据变化进入运行阶段）

• boforeUpdate
         将要根据数据变化后、最新的数据，重新渲染组件的模板结构，此时数据变化后还未放到模板结构上
• updated
         完成了最新数据重新渲染到组件的DOM结构，操作新的dom结构，应将代码写在updated中。

销毁阶段

• beforeDestroy
         在Vue实例销毁之前被调用，但此时我们的实例还未被销毁。可以做一些操作，比如销毁定时器，解绑全局事件，销毁插件对象等
• updated

父子组件嵌套的生命周期

父组件先初始化 => 父组件渲染完毕 => 子组件开始初始化 => 子组件挂载完毕 => 父组件挂载完毕

• 渲染的过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

• 父组件更新过程

父beforeUpdate->父updated

• 销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

Vue-Router懒加载

       1、箭头函数+import

const List = () => import('@/components/list.vue')
const router = new VueRouter({
   
  routes: [
    {
    path: '/list', component: List }
  ]
})

       2、箭头函数+require

const router = new Router({
   
  routes: [
   {
   
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})

如何定义动态路由

param方式

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123

路由定义

//在APP.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>    
//在index.js
{
   
   path: '/user/:userid',
   component: User,
},

路由跳转

// 方法1：
<route