2018-03-19 VUE做简历制作工具5

例子：

image.png

image.png

image.png

点击tab1显示content1
点击tab2显示content2
问题：如果目前显示的是content2，页面刷新或者分享给别人，又回到默认的content1了
可以通过url来保存当前状态
方法一：通过hash里的锚点来保存

image.png

image.png

image.png

点击后url在变，但是把这个url分享出去还是没有什么用

image.png

1、设置hash location.hash=index
2、读取hash let index = location.hash ||'#0' //取的时候会有#号
3、分析hash index=index.substring(1) //不要#号，从1开始

image.png

既然可以用锚点，那么也可以换一种方式来进行，用a标签的href来记录，这个时候就可以不用监控li的点击事件，而是监控href的变更

image.png

那么上面2种有没有问题呢？有
如果html还有其他的a标签，被点击之后

image.png

锚点就会变了，

image.png

尤其是你的这个锚点不符合代码里写的路由规则
分享出去，页面会刷新显示到之前默认的

image.png

image.png

换href为路径，但是a标签，换路径会跳转
那么我们先阻止默认跳转
然后打印下

image.png

image.png

image.png

image.png

换一种方式
console.log(a.getAttribute('href'))

image.png

image.png

改了url，不跳转页面 ——利用history API无刷新的更改地址栏
点击其他a标签也不会有影响

image.png

问题：这种方式不能分享（链接给别人），是404的，因为服务器不知道
那么在服务器里识别下

image.png

image.png

另外一种，后台不管路径，不管前端请求什么，后端都返回index.html（最好不要这样）

image.png

什么是路由：
if path===xxx，那么就执行yyy()
else if path===xxx2，那么就执行yyy2()
给我一个路径，我就返回给你一个响应

前端做路由，就是前端路由
后端做路由，就是后端路由

image.png

前端的路由

image.png

后端的路由

用库vue router来进行路由
继续在vue_resume里进行

image.png

希望单独的页面来做登录，用路由来做

image.png

希望有个单独的页面来显示注册
进入vue-router

image.png

router-link：有特殊功能的a标签

image.png

http://jsbin.com/nicopicequ/edit?html,js,output

image.png

是一种hash，我们能不能换一种方式呢？用路径

image.png

history模式，就是路径了，

image.png

不能刷新

image.png

安装vue-router
npm install vue-router

image.png

如何引入组件呢？

image.png

方法一：用webpack

image.png

方法二：用命名空间

image.png

image.png

image.png

image.png

image.png

image.png

进入登录界面后，其没有父级了

image.png

app里只有一个div
那么登录之后的数据放哪里呢？
页面结构

image.png

如果这个数据是共有的，那么就把它放在root里
如果这个数据是自己单独的，那么就放在自己的data里
这个项目之前是单页面，现在是单页面+前端路由

a标签是后端路由
router-link是preventdefault的a标签→前端路由

image.png

之前后端管，#之后前端管

根据不同的路径展示不同的UI，就是router ，vue-router是其中之一

image.png

前端的发展路程