专栏首页更流畅、简洁的软件开发方式从后端到前端之Vue(五)小试路由

从后端到前端之Vue(五)小试路由

  一开始我还以为vue的路由只能用在工程化的项目里面呢,然后研究了一下才发现,在脚本化里面也是可以用的。其实呢不管在哪里用,把原理研究明白就对了。

一、 官网demo

  这里不得不吐槽一下官网,写的不清不楚的,在哪里使用都没有说清楚,几行代码一句话就轻飘飘的交代完事了,剩下的事情还得自己研究,比如 HTML5 History API 是怎么回事。这里又涉及了一个问题,想要用好vue,必须的基础是要先掌握的,因为vue的官网教程里面不会管这些基础知识的。

  先看官网的代码:

 1 const NotFound = { template: '<p>Page not found</p>' }
 2 const Home = { template: '<p>home page</p>' }
 3 const About = { template: '<p>about page</p>' }
 4 
 5 const routes = {
 6   '/': Home,
 7   '/about': About
 8 }
 9 
10 new Vue({
11   el: '#app',
12   data: {
13     currentRoute: window.location.pathname
14   },
15   computed: {
16     ViewComponent () {
17       return routes[this.currentRoute] || NotFound
18     }
19   },
20   render (h) { return h(this.ViewComponent) }
21 })

  很简单吧就这么几句,浪费了我好多时间才研究明白。恩,好吧还有一个地方每太明白。

  首先定义了三个“常量”,就是不能改的那种变量,代表三个页面,或者说是三个模板。分别是404、首页和关于我们。

  然后定义了一个路由规则,其实就是一个json,也可以理解为是一个实体类。Key代表url的地址后面的路径和文件名,后面的是我们的真实页面,也就是第一行定义的三个常量。

  然后就是常见的vue的实例了,首先需要一个div与之对应,然后是data返回url上面的地址,然后ViewComponent 是根据url地址返回对应的模板(页面)。

  最后是render 。大概是实现绑定div的功能吧。

  根据这个意思补充了一个页面

1 <body>
2     <span onclick="myURL('/')">首页</span>
3     <span onclick="myURL('/about')">关于</span>
4     <div id="app"></div>
5 </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代码。

1 <span onclick="myURL('/')">首页</span>
2 <span onclick="myURL('/about')">关于</span>
3 
4 function myURL(name) {
5         history.pushState(null, null, name);
6         route.currentRoute = window.location.pathname;
7 }

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • “超市购物”的表驱动的想法

       看了《领域对象驱动开发:来吧,让我们从对象开始吧》,结尾说“最后大家回想一下,用数据库表驱动的方式。分析这个业务会是什么样子的”,那么我就说一下我的想法吧...

    用户1174620
  • 【自然框架】 页面里的父类—— (补充)

          没想到下午发的《【自然框架】 页面里的父类——把共用的东东都交给父类,让子类专注于其他。 》启发了热烈讨论,还以为又是一大堆的口水回复呢。看到大家的...

    用户1174620
  • 【自然框架】稳定版的Demo——看点二:权限,权限过滤与验证。

    建议先看看 上一篇:【自然框架】稳定版beta1——源码下载,Demo说明 在线演示:http://demo.naturefw.com/login.aspx ...

    用户1174620
  • Android自定义View之TitleBar,通用标题栏

    版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/49...

    Hankkin
  • PGXZ 的架构揭秘

    本文将重点介绍 PGXZ,作为 TStack 平台重要的数据库产品能力,用户可在云端轻松设置、操作,且无需负责基础运维工作,以及为灾难恢复而进行的数据备份。

    腾讯云TStack
  • 使用 Elastic Stack 构建 Kubernetes 全栈监控(1/4)

    在本系列文章中,我们将学习如何使用 Elastic 技术栈来为 Kubernetes 构建监控环境。可观测性的目标是为生产环境提供运维工具来检测服务不可用的情况...

    我是阳明
  • caffe随记(十)---DeepLabV2安装过程

    1.下载DeepLabV2的code https://bitbucket.org/aquariusjay/deeplab-public-ver2, 这个网址是...

    TeeyoHuang
  • Hexo 入门指南(四) - 页面、导航、边栏、底栏

    会在source/about中生成index.html。这个就叫做页面,不在文章列表显示,可以通过http://localhost/about浏览。

    ApacheCN_飞龙
  • 聊聊MaxwellKafkaProducer

    maxwell-1.25.1/src/main/java/com/zendesk/maxwell/producer/MaxwellKafkaProducer.j...

    codecraft
  • Nuance声龙驾驶:打造人性、自然的人车交互

    想象一下,未来某一天,您的汽车、您的家、以及外面世界实现了无缝连接。您只要说出想做的事情便可以获取信息、娱乐和更多……多年来,从嵌入式和基于云的语音识别、自然语...

    机器人网

扫码关注云+社区

领取腾讯云代金券