01.路由钩子函数
路由钩子函数分为三种:
1：全局钩子： beforeEach、 afterEach、beforeResolve
2：单个路由里面的钩子： beforeEnter
3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
路由所对应组件勾子
beforeRouteEnter:进入前，在beforeCreate之前执行，不能使用this
beforeRouteEnter((to,from,next)=>{
next((vm)=>{
vm:当前组件的实例对象
})
})
beforeRouteUpdate:更新前，路由更新了，路由所对应组件不变时执行
注意：它是更新前，如果获取当前路由，它是更新前的路由信息，如果要
获取更新后的使用this.$nextTick(()=>{
获取更新后的})
beforeRouteLeave:路由离开前路由配制所对应勾子
beforeEnter:读取路由配制时执行
执行先后
beforeEach===>beforeEnter===>beforeRouteEnter===>beforeResolve===>afterEach
更新时执行先后
beforeEach===>beforeRouteUpdate===>afterEach
beforeDestroy执行时间节点
A路由跳转到B路由时它们A组件与B组件执行的生命周期勾子
beforeCreate(B)===>created(B)===>beforeMount(B)===>beforeDestroy(A)===>
destroyed(A)===>mounted(B)
父组件与子组件生命周期执行先后
beforeCreate(父)===>created(父)===>beforeMount(父)===>beforeCreate(子)===>
created(子)===>beforeMount(子)===>mounted(子)===>mounted(父)
路由钩子函数分为三种类型如下：
第一种：全局钩子函数。
to：route即将进入的目标路由对象，
from：route当前导航正要离开的路由
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
router.beforeEach((to, from, next) => {
console.log('beforeEach')
//next() //如果要跳转的话，一定要写上next()
//next(false) //取消了导航
next() //正常跳转，不写的话，不会跳转
})
router.afterEach((to, from) => {
// 举例: 通过跳转后改变document.title
if( to.meta.title ){
window.document.title = to.meta.title //每个路由下title
}else{
window.document.title = '默认的title'
}
})
第二种：针对单个路由钩子函数
beforeEnter(to, from, next){
console.log(‘beforeEnter’)
next() //正常跳转，不写的话，不会跳转
}
第三种：组件级钩子函数
beforeRouteEnter(to, from, next){
//
这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
console.log("beforeRouteEnter")
console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来
next((vm) => {
//vm,可以这个vm这个参数来获取this实例,接着就可以做修改了
vm.text = '改变了'
}) }, beforeRouteUpdate(to, from, next){
//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新
console.log('beforeRouteUpdate')
next(); }, beforeRouteLeave(to, from, next){
// 当离开组件时，是否允许离开
next() }
02.组件方法 (utils)
1.操作cookie
// 原生js可以直接操作cookie 不方便获取
// 第三方的包 操作cookie
// 设置Cookie.set(key,value) localStorage.setTtem(key,value)
// 获取Cookie.get(key) localStorage.getTtem(key)
// 删除Cookie.remove(key) localStorage.removeTtem(key)
import Cookies from 'js-cookie'
// const TokenKey = 'vue_admin_template_token'
const TokenKey = 'hrsaa-74-token-nb'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
2.封装函数将列表型数据转换为树形数据 递归思想
// 封装函数将列表型数据转换为树形数据
// list :要转换的数据
// value 根数据
// 递归思想 一个函数自己调用自己 (死循环 需要条件结束)
export function transLisToTree(list, value) {
const arr = []
list.forEach(item => {
if (item.pid === value) {
// 根据父id 往下找
const children = transLisToTree(list, item.id)
// console.log(children)
if (children.length > 0) {
// 转换为树形 获取数据
item.children = children
}
arr.push(item)
}
})
return arr
}
3.按需导出 验证手机号
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
// 按需导出
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const arr = ['admin', 'editor']
return arr.indexOf(str.trim()) >= 0
}
// 验证手机号
export function validMobile(str) {
return /^1[3-9]\d{
9}$/.test(str) // 正则1 +3->9 +9位
}
4. // 设置请求根路径 // 请求拦截器 // 响应拦截器 // 处理 400 401 500错误
import axios from 'axios'
import {
Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
// create an axios instance
// process.env当前进程的环境变量
const service = axios.create({
// 设置请求根路径
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
/* // 创建了axios实例, 使用的是自己的配置项
const instance = axios.create({
// 开发环境, 找 env.development, 找 VUE_APP_BASE_API 变量
// 生产环境, 找 env.production, 找 VUE_APP_BASE_API 变量
baseURL: process.env.VUE_APP_BASE_API, // 环境变量
timeout: 5000 // request timeout
})
*/
// 请求拦截器
service.interceptors.request.use(function(config) {
// 携带token
const token = store.getters.token
config.headers.Authorization = 'Bearer ' + token
return config
}, function(error) {
return Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((response) => {
// 将axios放回数据解了一层壳
const res = response.data
const {
message, success } = res
if (!success) {
Message.error(message)
return Promise.reject(new Error(message))
}
return res
}, (error) => {
// 处理 400 401 500错误
// 当服务器返回的错误信息 400 401 501 都会在响应拦截器的第二个回调函数
// if (error.response.status === 401 ) {
if (error.response.status === 401 && error.response.data.code === 10002) {
// 1.弹出错误提示
// 2.清空用户数据
// 3.跳转登录页面
Message.error('登录失效')
// Message.error(error.response.data.message)
store.dispatch('user/logout')
router.push('/login')
} else {
console.dir(error)
Message.error(error.message)
}
return Promise.reject(error)
})
export default service
稍后扩充…