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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
js实现导航跟随效果
2018/11/17 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
机器学习python实战之决策树
2017/11/01 Python
python numpy元素的区间查找方法
2018/11/14 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
2015个人半年总结范文
2015/03/09 职场文书
团员自我评价范文
2015/03/10 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
python入门之算法学习
2021/04/22 Python
Django分页器的用法你都了解吗
2021/05/26 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS