vue-router的全局钩子beforeEach
来源:互联网 发布:c语言编程汉诺塔 编辑:程序博客网 时间:2024/06/04 19:05
在我们浏览网页时,经常遇到当点击某个页面时会让我们先进行登录然后再进入目标页面,那么怎么设置这样的逻辑呢?在vue官网给出定义为全局钩子,还有一些当我们编辑文本时,如果点击关闭,会先跳出一个提示,让你选择是否关闭,本章在这里只叙述第一种情况。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> <router-link to="/news/123456/1"></router-link> <router-link :to="{name:'home',query:{id:1,pwd:2}}">honme</router-link> <router-link :to="{name:'news',params:{id:11,pwd:12}}">news</router-link> //news为目标页面,到那个我们想跳到news页面时必须先进行判断 <input type="button" value="go" @click="gourl"> </div> <template id="home"> <div> home </div> </template> <template id="news"> <div> news </div></template> <template id="login"> <div> <input type="text" v-model="name"> <input type="text" v-model="pwd"> <input type="button" value="登录" @click="login"> </div> </template> <script src="../vue.min.js"></script> <script src="../vue-router.js"></script> <script> var home={ template:'#home', created(){ //alert('home created') } } var news={ template:'#news', created(){ //alert('news created') } } var login={ data(){ return{ name:'', pwd:'' } }, template:'#login', methods:{ login(){ sessionStorage.setItem('user',{name:this.name,pwd:this.pwd}) this.$router.push(this.$route.query.redirect) //这里为路由的固定写法 } } } var router=new VueRouter({ /*mode:'history',*/ routes:[ { path:'/home', component:home, name:'home' }, { name:'news', path:'/news/:id/:pwd', component:news, meta:{ /*标明需要登录*/ auth:true } //因为我们要对new进行判断,所以必须再其路由上增加一个meta属性,对于里面的auth是我们自己进行命名的 }, { name:'login', path:'/login', component:login } ] }) router.beforeEach(function (to,from,next) { //console.log(to,from,next) //需求登录判断 if(to.meta.auth){ /*不为空*/ if(sessionStorage.getItem('user')){ next(); }else{ next('/login?redirect='+to.fullPath) //这里与上面的相对应,此处也可以写成 /*** next({ path: '/login', query: { redirect: to.fullPath } })***/ //上面为另外一种写法 } } else{ next(); } }) new Vue({ el:'#app', router, methods:{ gourl(){ /*history.go()*/ this.$router.go(1); //this.$router.push('/news/11/22'); this.$router.push({name:'news',params:{id:1110,pwd:12}}) } } }) </script></body></html>
当我们在用vue-cli做项目时, router.beforeEach的正确位置应当放到main.js中,
小生初出茅庐,欢迎各位大神指点迷津,
阅读全文
0 0
- vue-router的全局钩子beforeEach
- vue-router 导航钩子
- vue-router钩子
- Vue-router导航钩子
- vue-router,利用router.beforeEach未登录跳转到登录页
- vue router路由钩子详解
- vue router 导航钩子(导航守卫)
- vue-router 的属性
- vue-router的使用
- vue-router的使用
- Vue-router的使用
- Vue的钩子函数
- Vue的路由钩子
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- vue-router 2.0 常用基础知识点之导航钩子
- vue-router 2.0 常用基础知识点之导航钩子
- Backbone路由添加类似vue-router导航钩子
- vue-router 2.0 常用基础知识点之导航钩子
- Spring RedisTemplate操作-全注解操作
- FPGA IN 金融领域
- MySQL删除表的时候忽略外键约束
- 常用的一些图像处理Matlab源代码
- Java集合框架大纲
- vue-router的全局钩子beforeEach
- 硬货 | 一文了解深度学习在NLP中的最佳实践经验和技巧
- Web-Scale Training for Face Identification
- 【OpenCV3.3】编译源码并搭建VS2017+Windows开发环境
- 计算机网络学习入门
- PopWindow封装
- luogu P2890 便宜的回文
- World怎么去掉 某一文本框中的 红色或蓝色下划线
- 7-32 哥尼斯堡的“七桥问题”(25 分)