登陆界面、路由拦截
程序员文章站
2024-03-08 18:30:52
...
- 登陆界面、路由拦截
- 页面自适应
路由拦截
全局前置守卫
- 参考导航守卫
使用router.beforeEach
注册一个全局守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
-
to:Route
: 即将要进入的目标** 路由对象** -
from: Route
: 当前导航正要离开的路由 -
next: Function
: 一定要调用该方法来resolve
这个钩子。执行效果依赖next
方法的调用参数。
实例
在main.js
中加如下代码:
引入依赖
import Lockr from 'lockr';
设置全局前置守卫
router.beforeEach((to, from, next) => {
if ((Lockr.get('token')==undefined||Lockr.get('token')=="") && to.path != '/login') { // 判断是否有token
next('/login')
} else {
next()
}
})
在login.vue
设置Lockr
:
引入依赖
import Lockr from 'lockr';
设置Lockr
Lockr.set('token', this.formInline.user)
登陆界面特效
引入依赖
npm install vue-particles --save-dev
main.js
文件
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
实例
<template>
<div id="app">
<vue-particles
color="#dedede"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</template>
注意:粒子特效必须放在后面,不然会导致后续元素无法显示!!!
- 未完待续
上一篇: 如何利用JConsole观察分析Java程序的运行并进行排错调优
下一篇: PHP7多线程搭建教程