导航守卫+

目的:进入或者离开页面前做拦截和额外操作(不让进入,不让离开)

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 守卫 只在进入路由时触发,不会在 paramsquery 或 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()
})

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 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("你好")
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值