最近有人问我一个问题，你的项目是用Vue SPA(单页)还是Vue多页设计？

本文重点介绍Vue的SPA单页设计。请点击查看如何开发Vue多页设计。

什么是vue路由器？

首先，我们需要知道vue路由器是什么，它是做什么的。

这里的路由不是指我们通常所说的硬件路由器，而是指SPA(单页应用)的路径管理器。换句话说，vue-router就是WebApp的链路路径管理系统。

Vue-router是Vue.js的官方路由插件，与vue.js深度集成，适合构建单页应用。

那和传统的跳页有什么区别？

1.1.vue的单页应用是基于路由和组件的。路由用于设置访问路径以及映射路径和组件。

2.传统的页面应用程序使用超链接来切换和跳转页面。

在vue-router单页应用中，是路径之间的切换，也就是组件的切换。路由模块的本质是建立url和页面之间的映射关系。

至于为什么不能用A标签，是因为所有用Vue做的应用都是单页，相当于只有一个主index.html页，所以你写的标签不管用，必须用vue-router管理。

虚拟路由器的实现原理

Spa(单页应用):单页应用只有一个完整的页面；当它加载页面时，它不会加载整个页面内容，而只会更新指定容器中的内容。

单页应用的核心之一是：

1.在不重新请求页面的情况下更新视图；

2.vue-router在实现单页前端路由时提供了三种模式：Hash模式、History模式和抽象模式，具体哪种模式是根据模式参数决定的。

路由模式

vue路由器提供三种操作模式：

hash:使用URL哈希值进行路由。默认模式。

history:取决于HTML5 History API和服务器配置。检查HTML5历史模式。

abstract:支持所有的JavaScript运行环境，比如Node.js server。

哈希模式

vue-router的默认模式是hash模式——，使用URL的hash来模拟一个完整的URL。当网址改变时，页面不会被重新加载。

哈希(#)是URL的锚点，它代表网页中的一个位置。只需在# (/#/.)，浏览器只会加载相应位置的内容，不会重新加载网页。也就是说，#是用来引导浏览器动作的，对服务器完全没用，#不包含在HTTP请求中；同时，每次#后的部分发生变化时，浏览器的访问历史中都会增加一条记录，使用“后退”按钮即可返回上一位置；因此，哈希模式通过改变锚点值，根据不同的值在指定的DOM位置呈现不同的数据。

历史模式

HTML5 History API提供了一个允许开发者在不刷新整个页面的情况下修改网站URL的功能，即使用history.pushState API完成URL跳转，无需重新加载页面；

由于哈希模式会带来# in url，如果我们不想要难看的哈希，可以使用路由的历史模式，只需在配置路由规则时添加' mode: 'history '即可。该模式充分利用history.pushState API完成URL跳转，无需重新加载页面。

//construter=new vuerouter在//main.js文件中({mode:' history '，route: [.]})使用历史模式时，url就像普通URL一样，比如yoursite.com/user/id,哪个更好.但是这种模式需要后台配置的支持。因为我们的应用程序是单页客户端应用程序，如果后台配置不正确，当用户直接在浏览器中访问时，

因此，您应该添加一个涵盖服务器上所有情况的候选资源：如果URL与任何静态资源都不匹配，您应该返回到同一个index.html页面，这是您的应用程序所依赖的页面。

导出常量路由=[ {path: '/'，名称：“家庭链接”，组件： Homelink } {路径： '/Register '，名称： '注册链接'，组件：注册}，{ path : '/登录'，名称： '登录链接'，组件