我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建
(再补充一点,安装脚手架的时候尽量选择安装路由。剩下的代码规范那些可以选否)
后台数据是用mock-data模拟的 下面会有具体步骤
mock-data.json暂时写了三条数据,用于随后登陆用
login.vue和list.vue分别用来登陆和另一个展示页面
list页面随便写点东西就行了
login页面template中先随便写下,样式先不写主要实现功能
然后在data中绑定model数据
我是把hello中的东西都删了 写了个登陆后显示页面 大家随意 这块无所谓(是不是写的有点太细太基础了。。下面加快节奏)
注释部分暂时忽略,权当没看见
那么我们需要在这个基础上添加个属性,就是把注释释放开的效果(手动滑稽)
同样在list里面也加上这个属性 加这个属性干啥呢?继续看 下一步就知道了
在main.js中配置一个全局前置钩子函数:router.beforeEach(),他的作用就是在每次路由切换的时候调用
这个钩子方法会接收三个参数:to、from、next。
to:Route:即将要进入的目标的路由对象,
from:Route:当前导航正要离开的路由,
next:Function:个人理解这个方法就是函数结束后执行什么,先看官方解释↓↓↓↓↓
1.next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的),
2.next(false):中断当前的导航。如果浏览器的url改变了(可能是用户手动或浏览器后退按钮),那么url地址会重置到from路由对应的地址。
3.next('/')或next({path:'/'}):跳转到一个不同的地址。当前导航被中断,进入一个新的导航。
这里可以把三个参数打出来看一下,在上面设置的needLogin字段就在to里面,接下来就会用到
这里就用到了needLogin字段
对这个字段进行判断,如果没有这个字段说明不需要登录就能查看的页面 就让他next()就行了
这里有个坑,next()必须写上,next()必须写上,next()必须写上,不然会报错↓↓↓↓↓
login.vue里面的button有一个login方法,在login中我们用axios验证账号密码
安装axios:cnpm install axios --save
在login中引入axios
接下来就可以在登录页面用axios了,具体步骤写在注释里了,更方便大家理解
好了,至此就完成了一个简单的登录了,浏览器关闭后sessionStorage会清空的,所以当用户关闭浏览器再打开是需要重新登录的
当然也可以手动清除sessionStorage,清除动作可以做成注销登录,这个就简单了↓↓↓↓↓
写一个清除session的方法
代码不多 相信大家跟着来一遍就会了 ,有什么不足的希望大家能指正,共同学习!哪里不明白可以在下面评论,看到了我会解释的
源码地址:https://gitee.com/RtyXmd/vueDengLu.git
补充一点:有的朋友如果是直接clone下来的 安装完依赖之后需要全局安装json-server:cnmp install json-server -g
然后输入json-server .\mock-data.json启动之后就可以验证数据了