Vue路由前后端设计总结
一开始我还以为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 要怎么改？这种简单的模板没办法做复杂应用的呀。也许只有在工程化的项目里，路由才能发挥最大的作用吧。
感谢大家的阅读和对脚本之家的支持。
相关文章
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了解决vue项目获取dom元素宽高总是不准确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue3如何利用vuedraggable实现动态配置页面,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下2023-12-12
这篇文章主要介绍了使用vscode快速建立vue模板过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要给大家介绍了关于vue中watch和computed区别的相关资料,computed和watch都是vue框架中的用于监听数据变化的属性,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于vue.js如何在网页中实现一个金属抛光质感的按钮的相关资料,文中给出了详细的实例代码以及图文将实现的方法介绍的非常详细,需要的朋友可以参考下2023-04-04
Vue.js每天必学之数据双向绑定，如何进行绑定，如何进行数据双向绑定，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue-cli2 构建速度优化的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了使用vue-cli3新建一个项目并写好基本配置的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
本文主要介绍了vite中的glob-import批量导入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论