目的:进入或者离开页面前做拦截和额外操作(不让进入,不让离开)
beforeRouteEnter 组件进入前
beforeRouteLeave 组件离开前
beforeRouteUpdate 组件更新前
页面引入
beforeRouteLeave(to, from, next) {
// to 离开到那哪个页面
// from 从哪个页面离开
// next 下一步操作 next(true)离开 next(flase) 不离开 next(/"") 离开要去的页面
// 一旦写了导航守卫 next就一定要执行
var result=window.confirm('确定离开吗?')
if (result) {
next(true)
} else {
next(false)
}
to(要进入的页面路由)
from(从那个页面离开)
next(true/false) 是否放行 , 不写参数默认 true
beforeRouteEnter里面没有this(页面都没有进入没有this)
next(vm => {
// 通过 `vm` 访问组件实例
})
beforeEnter 路由独享守卫 (路由配置)
beforeEnter
守卫 只在进入路由时触发,不会在 params
、query
或 hash
改变时触发
{
path: '/home',
name: 'home',
beforeEnter:(to,from,next)=>{
next(true)
}
component:()=>import('@/views/HomeView.vue')
},
全局守卫
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
router.beforeEach((to,form,next)=>{
// 所有页面进入前执行
next();
})
router.afterEach(()=>{
//所有页面进入后
})
router.beforeEach((to, from, next) => {
next()
})
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。
Nprogress
原理:页面启动的时候,构建一个方法,创建一个div,然后这个div靠近最顶部,用fixed定位住,至于样式就是按照自个或者默认走了。
安装
npm install --save nprogress
导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
自定义颜色 注:不要在原css文件内直接改动
#nprogress .bar {
background: #f70 !important;
}
#nprogress .peg {
box-shadow: 0 0 10px rgb(226, 173, 17), 0 0 5px rgb(224, 86, 18) !important;
}
移除小圆圈加载进度
NProgress.configure({ showSpinner: false });
进行全局调用
router.beforeEach((to,form,next)=>{
NProgress.start()
next();
})
进行全局调用
router.beforeEach((to,form,next)=>{
NProgress.start()
next();
})
Nprogress在request.js应用
图片懒加载
目的:减轻服务器压力,优化性能
// 实现图片懒加载 导入
import { Lazyload } from 'vant';
Vue.use(Lazyload);
keep-alive缓存
目的:减轻服务器压力,避免资源浪费,优化性能
定义:被keep-alive包裹的组件会被缓存起来(不会销毁)
keep-alive包裹的组件没有声明周期beforeDestory和destoryed声明周期
keep-alive包裹的组件:activated 激活生命周期,deactivated,失活生命周期
$开头方法(任意组件都可以访问)
$refs.xxx获取dom
<div class="aside" ref="aside">
this.$refs.aside
$route
当前路由信息
meta元信息
fullPath全路径
path路径
query 查询参数(?后面的数据)
params 路径参数
name名称
$set(name,index,data)
强制更新数据和视图
name 要修改的数据
index 数据的下标
data要更新的数
$store
vuex仓库
dispatch 调用action
commit 调用mutations
state 状态(模块要加模块名)
getters获取器
自定义$方法全局访问
main.js
// 导入request
import request from './utils/request'
// 让每个亣都拥有$request方法
Vue.prototype.$request = request;
Vue.prototype.$say = function(){
alert("你好")
}