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实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
angular.element方法汇总
Jan 07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
JS精确判断数据类型代码实例
Dec 18 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
客服主管岗位职责
2013/12/13 职场文书
一年级小学生评语
2014/04/22 职场文书
最新离婚协议书范本
2014/08/19 职场文书
志愿者个人总结
2015/03/03 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
活动总结模板大全
2015/05/11 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python