vue-router 路由守卫

JavaScript017

vue-router 路由守卫,第1张

一.全局守卫

1.全局前置守卫

语法:

参数说明:

to :进入到哪个路由去

from :从哪个路由离开

next :函数,决定是否展示你要看到的路由页面。

示例:

main.js 中设置全局守卫

2.全局后置守卫

语法:

参数说明:

二.组件内守卫

1.到达组件时

语法:

说明:

进行访问admin页面,会发现alert输出hello undefined。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。

2.离开组件时

语法:

说明:

三.路由独享守卫

语法:

说明:

对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards)。

组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave)。

官方文档地址: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

你可以使用 router.beforeEach 注册一个全局前置守卫:就是在你router配置的下方注册

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中

每个守卫方法接收三个参数:

确保要调用 next 方法,否则钩子就不会被 resolved。

为什么要写这篇文章?

安装lib-flexible

引入lib-flexible

安装px2rem-loader

配置px2rem-loader

项目里使用设计稿标注的px,编译或者打包后会自动转化为rem

在Vue-cli中使用lang="less"时报错: Module build failed: TypeError: this.getOptions is not a function at Object.loader

出现这个问题的原因是less-loader版本过高,降级到5.0.0即可

main.js添加

main.js

router/index.js

src文件夹下新建http文件夹,并在文件夹内新建request.js

request.js

main.js

使用方法:

然后就可以在项目中以 this.$axios 来进行请求

static文件夹下新增config.js

使用

(1) router/index.js

给每个路由新增一个auth字段来判断是否需要登录

(2) main.js

移动端项目调式怎么可以少了这个神器.

static 文件夹下新建 vconsole.js ,

再去git上拷贝源码下来,在 index.html 里引入, vconsole 地址: 点这里

index.html

main.js

App.vue

谷歌下不支持小于12px,当字体小于12px时 会变成12px 这个时候我们设置的rem及=就没有效果了 设置text-size-adjust会解决这个问题 禁用Webkit内核浏览器的文字大小调整功能

src / components 下新建index.js

main.js

使用: 直接使用不需要import

main.js中路由的前置守卫里添加这句:

本模板框架gitee地址: https://gitee.com/apple0515/vue_h5_project

持续更新~~