我是基于vue脚手架cli做的，没用过cli的可以看下我之前写的cli脚手架搭建
（再补充一点，安装脚手架的时候尽量选择安装路由。剩下的代码规范那些可以选否）
后台数据是用mock-data模拟的 下面会有具体步骤
开始啦：
1.初始化一个vue项目之后先来在目录中创建mock-data.json文件，用于模拟数据
mock-data.json暂时写了三条数据，用于随后登陆用
2.vue-cli默认的打开页面是hello.vue，此时我们在components中新建两个文件
login.vue和list.vue分别用来登陆和另一个展示页面
3.完善登陆页面
list页面随便写点东西就行了
login页面template中先随便写下，样式先不写主要实现功能
然后在data中绑定model数据
我是把hello中的东西都删了 写了个登陆后显示页面 大家随意 这块无所谓（是不是写的有点太细太基础了。。下面加快节奏）
4.配置路由：文件建好了。接下来吧路由配置下，下面这个是正常配置的路由↓↓↓↓↓
注释部分暂时忽略，权当没看见
那么我们需要在这个基础上添加个属性，就是把注释释放开的效果（手动滑稽）
同样在list里面也加上这个属性 加这个属性干啥呢？继续看 下一步就知道了
5.此时路由弄好了，来到main.js中
在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里面，接下来就会用到
6.判断是否需要登录
这里就用到了needLogin字段
对这个字段进行判断，如果没有这个字段说明不需要登录就能查看的页面 就让他next（）就行了
这里有个坑，next（）必须写上，next（）必须写上，next（）必须写上，不然会报错↓↓↓↓↓
7.现在能知道哪个页面需要登录了 接下来来到login页面
login.vue里面的button有一个login方法，在login中我们用axios验证账号密码
安装axios：cnpm install axios --save
在login中引入axios
接下来就可以在登录页面用axios了，具体步骤写在注释里了，更方便大家理解
8.我们把session存好后就可以在main.js中用了
好了，至此就完成了一个简单的登录了，浏览器关闭后sessionStorage会清空的，所以当用户关闭浏览器再打开是需要重新登录的
当然也可以手动清除sessionStorage，清除动作可以做成注销登录，这个就简单了↓↓↓↓↓
写一个清除session的方法
代码不多 相信大家跟着来一遍就会了 ，有什么不足的希望大家能指正，共同学习！哪里不明白可以在下面评论，看到了我会解释的
源码地址：https://gitee.com/RtyXmd/vueDengLu.git
补充一点：有的朋友如果是直接clone下来的 安装完依赖之后需要全局安装json-server：cnmp install json-server -g
然后输入json-server .\mock-data.json启动之后就可以验证数据了
网友评论