一、生命周期
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()
}
})