Vue路由前后端设计总结


Posted in Javascript onAugust 06, 2019

一开始我还以为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 要怎么改?这种简单的模板没办法做复杂应用的呀。也许只有在工程化的项目里,路由才能发挥最大的作用吧。

感谢大家的阅读和对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
js实现tab切换效果
Feb 16 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
Vue基础配置讲解
Nov 29 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
详解使用WebPack搭建React开发环境
Aug 06 #Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 #Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 #Javascript
angularjs请求数据的方法示例
Aug 06 #Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
重置Redux的状态数据的方法实现
2019/11/18 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python中np是做什么的
2020/07/21 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
专业销售业务员求职信
2013/11/18 职场文书
技能竞赛活动方案
2014/02/21 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
师恩难忘教学反思
2014/04/27 职场文书
预备党员个人总结
2015/02/14 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js