从后端到前端之Vue（五）小试路由
一开始我还以为vue的路由只能用在工程化的项目里面呢，然后研究了一下才发现，在脚本化里面也是可以用的。其实呢不管在哪里用，把原理研究明白就对了。
一、 官网demo
这里不得不吐槽一下官网，写的不清不楚的，在哪里使用都没有说清楚，几行代码一句话就轻飘飘的交代完事了，剩下的事情还得自己研究，比如 HTML5 History API 是怎么回事。这里又涉及了一个问题，想要用好vue，必须的基础是要先掌握的，因为vue的官网教程里面不会管这些基础知识的。
先看官网的代码：
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
很简单吧就这么几句，浪费了我好多时间才研究明白。恩，好吧还有一个地方每太明白。
首先定义了三个“常量”，就是不能改的那种变量，代表三个页面，或者说是三个模板。分别是404、首页和关于我们。
然后定义了一个路由规则，其实就是一个json，也可以理解为是一个实体类。Key代表url的地址后面的路径和文件名，后面的是我们的真实页面，也就是第一行定义的三个常量。
然后就是常见的vue的实例了，首先需要一个div与之对应，然后是data返回url上面的地址，然后ViewComponent 是根据url地址返回对应的模板（页面）。
最后是render 。大概是实现绑定div的功能吧。
根据这个意思补充了一个页面
<body>
<span onclick="myURL('/')">首页</span>
<span onclick="myURL('/about')">关于</span>
<div id="app"></div>
</body>
然后呢，运行网页显示 Page not found 404 ，看来路由还是起作用了。那么home和about要怎么出来呢？
二、HTML5 History API
首先要补充一下 HTML5 History API的相关知识，如果已经掌握了那么请略过。
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的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代码。
<span onclick="myURL('/')">首页</span>
<span onclick="myURL('/about')">关于</span>
function myURL(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模块了。
不过还有一个问题，那个 const About 要怎么改？这种简单的模板没办法做复杂应用的呀。也许只有在工程化的项目里，路由才能发挥最大的作用吧。
从后端到前端之Vue（五）小试路由的更多相关文章
- 从后端到前端之Vue（一）写个表格试试水
目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展——个性化设置 ...
- 从后端到前端之Vue（三）小结以及一颗真实的大树
上一篇写了一下tab,下面整理一下用过的知识点,本想按照官网的文档,整理一下可以更清晰,结果也许是我的方法不对吧,总之更模糊了. 按照官网文档的顺序整理到了表单输入绑定之前,因为之前大致也就只涉及到这 ...
- 从后端到前端之Vue（二）写个tab试试水
上一篇写了一下table,然后要写什么呢?当然是tab了.动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了. 好吧,这里其实只是试试水,感受一下vue的数据驱动可以 ...
- 从后端到前端之Vue（四）小试牛刀——真实项目的应用（树、tab、数据列表和分页）
学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...
- 从后端到前端之Vue（六）表单组件
表单组件 做项目的时候会遇到一个比较头疼的问题,一个大表单里面有好多控件,一个一个做设置太麻烦,更头疼的是,需求还总在变化,一会多选.一会单选.一会下拉的,变来变去的烦死宝宝了. 那么怎么解决这个问题 ...
- 循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...
- 0基础菜鸟学前端之Vue.js
简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解.下面总结一下这段时间的学习心得. 文章结构 前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue.js ...
- legend2---开发日志6（后端和前端如何相互配合(比如php，js，元素状态和数据改变)）
legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
随机推荐
- C语言实现Linux网络嗅探器
C语言实现Linux网络嗅探器 0x01 实验简介 网络嗅探器是拦截通过网络接口流入和流出的数据的程序.所以,如果你正在浏览的互联网,嗅探器以数据包的形式抓到它并且显示.在本实验中,我们用 C 语言实 ...
- 解决kali linux 2016.2实体机安装后root用户没有声音
Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:(1)在终端执行命令:systemctl --user enable pulseaudio (2)在/e ...
- yii中常用路径
//YII framework路径Yii::getFrameworkPath(); //protected/runtimeYii::app()->getRuntimePath(); //在vie ...
- Ruby字符串(1)：String基本用法
String字符串 字符串由String类提供,除了直接使用单双引号或其它字面量创建字符串,也可以使用String.new()方法来创建. a = "hello" b = Stri ...
- （H5）canvas实现裁剪图片和马赛克功能，以及又拍云上传图片
1.核心功能 此组件功能包含: 图片裁剪(裁剪框拖动,裁剪框改变大小): 图片马赛克(绘制马赛克,清除马赛克): 图片预览.图片还原(返回原图.返回处理图): 图片上传(获取签名.上传图片). 2.核 ...
- Qt定制控件列表
目录 炫酷进度条 提示框 小时钟 高仿excel表格 多级表头表格 多级表头树控件 多维度折线图 表格控件-蚂蚁线 日历控件 饼图 窗体靠边自动隐藏 下拉框内容定制 模仿QQ上传头像 菜单定制 属性表 ...
- 并发编程-Future+callable+FutureTask 闭锁机制
项目中经常有些任务需要异步(提交到线程池中)去执行,而主线程往往需要知道异步执行产生的结果,这时我们要怎么做呢?用runnable是无法实现的,我们需要用callable实现. FutureTask ...
- HDU 2298：Toxophily（推公式）
http://acm.hdu.edu.cn/showproblem.php?pid=2298 题意:给出一个x,y,v,问从(0,0)以v为初速度射箭,能否射到(x,y)这个点,如果能,输出最小的射出 ...
- POJ 3321：Apple Tree + HDU 3887：Counting Offspring（DFS序+树状数组）
http://poj.org/problem?id=3321 http://acm.hdu.edu.cn/showproblem.php?pid=3887 POJ 3321: 题意:给出一棵根节点为1 ...
- IntelliJ Idea 常用快捷键总结-0 #<间断性更新中...>，部分有示例
IntelliJ Idea 常用快捷键总结-0 <间断性更新中...>,部分有示例 自动补齐代码 常用的有for循环体,fori可以输出循环语句: eg: public void test ...