Vue路由前后端设计总结
一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的。其实呢不管在哪里用,把原理研究明白就对了。
一、官网demo
这里不得不吐槽一下官网,写的不清不楚的,在哪里使用都没有说清楚,几行代码一句话就轻飘飘的交代完事了,剩下的事情还得自己研究,比如HTML5HistoryAPI是怎么回事。这里又涉及了一个问题,想要用好vue,必须的基础是要先掌握的,因为vue的官网教程里面不会管这些基础知识的。
先看官网的代码:
constNotFound={template:'Pagenotfound
'} constHome={template:'homepage
'} constAbout={template:'aboutpage
'} constroutes={ '/':Home, '/about':About } newVue({ el:'#app', data:{ currentRoute:window.location.pathname }, computed:{ ViewComponent(){ returnroutes[this.currentRoute]||NotFound } }, render(h){returnh(this.ViewComponent)} })
很简单吧就这么几句,浪费了我好多时间才研究明白。恩,好吧还有一个地方每太明白。
首先定义了三个“常量”,就是不能改的那种变量,代表三个页面,或者说是三个模板。分别是404、首页和关于我们。
然后定义了一个路由规则,其实就是一个json,也可以理解为是一个实体类。Key代表url的地址后面的路径和文件名,后面的是我们的真实页面,也就是第一行定义的三个常量。
然后就是常见的vue的实例了,首先需要一个div与之对应,然后是data返回url上面的地址,然后ViewComponent是根据url地址返回对应的模板(页面)。
最后是render。大概是实现绑定div的功能吧。
根据这个意思补充了一个页面
首页 关于
然后呢,运行网页显示Pagenotfound404,看来路由还是起作用了。那么home和about要怎么出来呢?
二、HTML5HistoryAPI
首先要补充一下HTML5HistoryAPI的相关知识,如果已经掌握了那么请略过。
HTML5HistoryAPI提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场。
我们可以用history.pushState(null,null,‘about');来改变url地址,这种方式只是单纯的修改地址里的url,而不会向服务器提交,这样页面就不会被刷新,我们才有机会执行vue的代码。
然后呢,页面当然是不会有啥变化的,因为vue是数据驱动,我们的数据改变了吗?并没有,我们只是改变了一下url。这个vue似乎没有对rul做监听,或者是我还不知道怎么让vue去监听url的变化,总之我们先自己改变数据,然后再去研究vue有没有办法去监听url。
我们在写一行修改数据的代码route.currentRoute=window.location.pathname就可以了。
最后加一个简单的导航,执行上面两行js代码。
首页 关于 functionmyURL(name){ history.pushState(null,null,name); route.currentRoute=window.location.pathname; }
三、按了F5怎么办?
按F5会刷新页面,如果这时候url地址栏是“/about”,那么就会向服务器提交这个网址,很显然会出现服务器的404页面。因为服务器网站里面并没有这个地址。那么怎么办呢?目前想到的办法就是修改网站的404页面。比如IIS,可以到IIS里改一下,把我们做的这个router.html设置为404的响应页面,这样按F5就没事了。
当然这种方式并不是太好的选择,只是一种临时的方法。应该会有更好的方法吧。没事不急慢慢学。
这种方式还支持直接在浏览器的地址栏里面输入http://127.0.0.1:8000/about也是可以正常运行的。只需要注意一下vue.js的引用地址确保能够正确加载js文件即可。
那么如果地址栏里输入http://127.0.0.1:8000/aboutss呢?当然是vue设计的404模块了。
不过还有一个问题,那个constAbout要怎么改?这种简单的模板没办法做复杂应用的呀。也许只有在工程化的项目里,路由才能发挥最大的作用吧。
感谢大家的阅读和对毛票票的支持。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。