一、生命周期
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=""
三、路由
简单来说，前端路由就是路径和组件的映射关系
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()
}
})