一开始我还以为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就可以了。