生命周期、钩子函数、路由

一、生命周期

1、Vue实例的生命周期：从创建到销毁的整个过程

钩子函数

钩子函数是Vue框架内置函数，随着组件的生命周期阶段，自动执行，实现在特定的时间点，执行特定的操作

• 四大阶段8个方法
  
  1、初始化

beforeCreate()执行在new Vue()以后，vue内部给实例对象添加了一些属性和方法，在data和methods初始化之前;但它很少使用，更多使用created

created()执行在data和methods初始化以后，可以访问到data中的变量
使用场景：网络请求，注册全局事件

2、挂载

beforeMount()在真实DOM挂载之前执行
使用场景：预处理data，不会触发updated钩子函数

mounted()在真实DOM挂载以后
使用场景：获取真实DOM

3、更新
前提：data数据改变才执行

beforeUpdate()在更新之前执行
无法获取到真实的DOM节点

updated()在更新之后执行
使用场景：获取更新后的真实DOM

4、销毁

前提：当v-if=“false” 时，销毁Vue实例

二者使用场景：移除全局事件，移除当前组件，计时器，定时器，eventBus移除事件使用$off方法

二、axios使用

axios是一个专门用于发送ajax请求的库

1、特点：

• 支持客户端发送Ajax请求
• 支持服务端Node.js发送请求
• 支持Promise相关用法
• 支持请求和响应的拦截器功能
• 自动转换JSON数据
  2、使用：下载axios，引入axios
  get请求方式：
  
  如果需要传参，写在params配置项中，它会把参数自动写在url？后面

post请求方式：
post请求方式中，一般在请求体的data中传递数据给后台，data可以把参数自动装入到请求体中
3、全局配置基地址

axios.defaults.baseURL=""

axios官网

三、路由

简单来说，前端路由就是路径和组件的映射关系
1、使用路由的原因：

• 单页面应用：可以实现所有功能在一个html页面上实现
• 实现业务场景切换
• 整体不刷新页面，用户体验更好，传递数据容易，开发效率高
  2、使用路由——vue-router
  Vue Router官方介绍

组件分类：页面组件和复用组件

步骤：

• 下载vue-router模块到当前工程
• 在main.js中引入VueRouter函数
• 添加到Vue.use()身上-注册全局RouterLink和RouterView组件
• 创建路由规则数组-路径和组件名有对应关系
• 用规则生成路由对象
• 把路由对象注入到new Vue实例中
• 用router-view作为挂载点，切换不同的路由页面
  
  3、声明式导航-基础使用（router-link）
• "router-link"是vue-router提供的全局组件，用它来代替a标签，用to属性替代href属性
• 点击时，被点击的标签会被自动加上一个特殊的类名

<template>
<div>
  <div class="head">
    <router-link to="#/find">发现</router-link>
    <router-link to="#/my">我的</router-link>
  </div>
  <div class="top">
    <router-view></router-view>
  </div>
</div>
</template>

4、声明式导航-跳转传值
方式1：
要传值一方：to=“/path?参数名=值”
接收方：$ route.query.参数名
方式2：
要传值一方：首先在main.js中的路由规则path上定义 /path/:参数名，之后 to=“/path/值”
接收方：$route.params.参数名
5、重定向

匹配根路径后，强制跳转到某一个path路径

在规则数组中

{
   path:"/",   //根路径
   redirect:"/要跳转的path"
}

6、404页面设置

如果找不到路径，则给出提示页面

在规则数组中添加，添加到最后位置

{
   path:"*" ,  //根路径
   component:NotFound
}

7、路由模式修改


8、编程式导航（js方式跳转路由）
语法：
二者择其一

• this.$ router.push({path:“路由路径”})
• this.$ router.push({name:“路由名”})
• 如果使用name，则需要在规则数组中添加name属性

methods:{
    btn(targetPath,targetName){
      this.$router.push({
        path:targetPath  /  name:targetName
      })
    }
  }

9、编程式导航-传参
query和params任选一个，但是query和path不可以组合，推荐使用name和query组合

• params=>$ route.params.参数名
• query=>$ route.query.参数名
  10、路由嵌套

在现有的一级路由下，再嵌套二级路由

• 一级路由path从/开始定义
• 二级路由往后path直接写名字，无需/开头
• 嵌套路由在上级路由的children数组里编写路由信息对象
• 一级页面中需要写入router-view来展现二级页面
  11、声明式导航中两个激活类名的区别
• url上hash值如果包含导航href值，当前a就有“router-link-active” 类名（模糊）
• 如果等于，则有“router-link-exact-active” 类名（精确）

12、路由守卫

当需要对路由权限进行判断时使用

语法：
写在main.js中

router.beforeEach((to,from,next)=>{})

参数1：要跳转到的路由信息
参数2：从哪里跳转的路由信息
参数3：函数体，next（）会让路由正常跳转，next（false）会阻止跳转，原地停留，next（“强制修改到另一个路由路径上”）
如果不调用next，页面停留在原地

//登录例子
const isLogin=true;
router.beforeEach((to,from,next)=>{
  if(to.path==="/my"&&isLogin==false){
    alert("请登录")
    next(false)
  }else {
    next()
  }
})