一.全局守卫
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
持续更新~~