vue-router vue-x 实现状态保存 拦截路由
来源:互联网 发布:神话知乎 编辑:程序博客网 时间:2024/06/05 22:35
通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转。
一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex);
简单用vuex表示一下,不会可以自己去官网多看看;
import Vue from ‘vue‘import Vuex from ‘vuex‘Vue.use(Vuex);var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录};const mutations = { changeLogin(state,data){ state.isLogin = data; }};
二丶在用户登录时改变登录状态;
this.$store.commit(‘changeLogin‘,‘100‘) //登录后改变登录状态 isLogin = 100 ;
三丶重点来了;
在你的路由入口加上导航钩子,具体什么意思看代码;
一丶设置需要校验的路由
{ path: ‘/admin‘,
component: Admin,
meta:{auth:true} // 设置当前路由需要校验 不需要校验的路由就不用写了;不要问为什么,自己去看官网
}
二丶路由跳转并校验
router.beforeEach((to,from,next) => { if(to.matched.some( m => m.meta.auth)){ // 对路由进行验证 if(store.state.isLogin==‘100‘) { // 已经登陆 next() // 正常跳转到你设置好的页面 }else{ // 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
next({path:‘/login‘,query:{ Rurl: to.fullPath} })
}
}else{
next()
}
})
阅读全文
0 0
- vue-router vue-x 实现状态保存 拦截路由
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- vue-2.x webpack 安装vue-router 配置路由
- vue-router: 嵌套路由
- vue-router 路由
- vue-router: 嵌套路由
- vue-router路由
- vue-router 路由
- 前端路由 -- vue-router
- vue-router -- 嵌套路由
- Vue 路由(router)
- vue-router命名路由
- vue-router路由
- vue-router嵌套路由
- 使用Vue-Router 2实现路由功能
- 使用Vue-Router 2实现路由功能
- linux内核调试技巧二:dump_stack
- 23个深度学习库大排名:TensorFlow、Keras名列一二,Sonnet增长最快
- 哈希表
- Hibernate映射文件的配置
- ElasticSearch 5.4 客户端访问常见问题
- vue-router vue-x 实现状态保存 拦截路由
- flume1.6.0安装及测试
- Oracle_利用exp和imp迁移数据
- 从零开始精通深度学习
- 百度发布Deep Voice 3:全卷积注意力机制TTS系统
- 设置快捷键使页面全屏
- ELK环境搭建
- 用bootstrap做一个背景可轮转的登录界面
- 移动Web开发基础-百分比+flex布局方案