导航守卫的总结

导航守卫分为三类，分别为

• 全局守卫

• 路由守卫

• 组件中守卫

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

1全局导航守卫

全局前置守卫的作用是为了阻隔不符合条件的路由正常跳转例如：个人订单页面 不登录不能进入 登录需跳转到登录页 登录后可以正常跳转

01安装：

npm install --save nprogress

02 导入

目标文件地址：src/router/index.js

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

03 自定义颜色

目标文件地址：App.vue

只需要在App.vue中全局改变node_modules\nprogress\nprogress.css中的#nprogress .bar和#nprogress .peg的属性代码如下

<style lang="scss">

#nprogress .bar {

background: #f70 !important;

}

#nprogress .peg {

box-shadow: 0 0 10px rgb(226, 173, 17), 0 0 5px rgb(224, 86, 18) !important;

}

</style>

04 移除小圆圈加载进度

目标文件地址：src/router/index.js

NProgress.configure({ showSpinner: false });

{ showSpinner: false }用来判断是否显示进度条

不显示进度条如下

router.beforeEach((to,from,next)=>{

NProgress.start();

next();

})

router.afterEach(()=>{

// console.log("页面切换完毕");

NProgress.done();

})

5，Nprogress在request.js应用，即每次请求数据时

目标文件地址：src\utils\request.js

1：导入

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

2请求拦截

request.interceptors.request.use(function(config){

NProgress.start()

return config;

})

3响应关闭

request.interceptors.response(function(res){

NProgress.done()// 请求结束把Nprogress关闭

return res;

},function(err){

NProgress.done()// 请求结束把Nprogress关闭

return err;

})

2路由守卫

目标文件地址：src\router\index.js

beforeEnter（to,from,next）{

}

页面进入（路由配置）

3组件守卫

组件内的守卫分为三种

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

1.beforeRouteEnter 进入组件之前

进入该组件之前被调用，组件实例还没有被创建，不能使用 this关键字，可以通过传一个回调给 next来访问组件实例，也就是说可以通过 next 来回调实例化后的组件，用next函数的 vm 参数充当 this。

beforeRouteEnter:(to,from,next)=>{

alert(this.data); //此时组件还未实例化 弹出为 unedfind

next(vm =>{

alert(vm); //vm相当于this

})

}

2.beforeRouteLeave 离开组件之后

可以直接调用 this 关键字

beforeRouteLeave(to,from,next){

if(confirm("确定离开吗？") == true){

next()

}else{

next(false);

}

}

图片懒加载

目标文件地址：src\main.js

导入import {lazyLoad} from ‘vant’

使用Vue.use(lazyLoad)把图片：src替换为v-lazy