摘要：单页面应用，就是指浏览器将页面加载好之后，它就不动了。典型的就是index.html页面，当它从服务端返回之后，就再也不会请求第二次了。这是一种很奇特的思路，如果第一次接触会有点懵。为什么呢？
有一些知识理解了简单，不理解很绕，Vue-Router就是这种代表。因为它是vue标配的路由系统，所以我们需要好好研究下。
我们把速度降慢点，争取一篇解决一个问题就可以了。
单页面应用，就是指浏览器将页面加载好之后，它就不动了。典型的就是index.html页面，当它从服务端返回之后，就再也不会请求第二次了。这是一种很奇特的思路，如果第一次接触会有点懵。为什么呢？
因为在一般认知中，后端不是有一堆HTML吗？我要哪个就去请求哪一个，但是现在不这么弄了，单页面就是一个网页，也就是一个网站就只有一个index.html。
如图所示，index.html除了有一个什么都没了，非常简洁。
接着我们看下vue和vue-router的代码，如下：
const Login = {template: '我是登录页
'}const Home = {template: '欢迎访问我的主页！！！
'}var router=new Vuerouter({mode:'history',base:'/test-rsa/cmd/vue/router/',/* 定义两个路由规则 */routes:[{path:'/login',component:Login},{path:'/home',component: Home}]})new Vue({el:'#app',router})其中，vue-router就是一个js文件，需要提前下载放到IDE中，方便调试。这篇我们就解释清楚这个代码是怎么回事。
首先，我们在IDE中写了一个页面名为“test.html”（代码在上方，复制粘贴即可），IDE可以是vs code或webstorm等都可以，接着点击运行，那么IDE就会开一个内置的服务器运行，在浏览器中会出现这种样式的URL：
浏览器获取test.html页面之后，vue和vue-router开始激活了。这一点需要特别注意，就是无论怎样，先从服务器取页面是第一步，取到页面之后执行脚本，vue-router才能激活工作。
之后，浏览器再也不会请求test.html，除非刷新。
第二步，页面开始执行脚本，查找路由路径。那么我们就会问，什么是路由路径呢？
我们这里实验用的是vue-router，而且是history模式，那么路由路径就可以简单的认为是哪一个组件该上场了。
在上面提到这个组件，它就像一个舞台，这个形容很贴切，就是提供一个空间，组件就像表演者一样可以轮流上场表演，而路由路径就是具体决定哪个表演者上台。如下图所示：
下面是有很多组件想上去表演，但是组件得有一个标识，就好比点名一样，我得知道喊哪一个。大家可能会想，直接喊组件名就可以了呀。但是在页面这个场景下，我们喊的是路由不是组件，比如在网络世界中，是按路由请求的。明白了，我们把这个组件再起一个路由的名字，正好就对应上了。当别人请求路由路径时，就等价于喊组件名。
理解了原理，代码一下就变的很自然：
routes:[{path:'/login',component:Login},{path:'/home',component: Home}]这个就是路由映射关系，给组件起一个路由名，或者反过来说，给路由绑定一个组件。那么后面我们就只需要喊路由名，就可以把组件搬上去表演。
我们再回到故事的开头，当我们请求http://localhost:63342/test-rsa/cmd/vue/router/test.html这个页面之后，服务器就返回一个页面，接着执行脚本，vue-router激活，一进到vue-router系统之后，它就问，你要请求的是哪个路由？
它就好像不知道前面发生了什么事，在它的视角中就是问你要哪个路由，那么我们就把当前的URL进行了一下拆分：
vue-router要的是路由路径，那么域名自然就不要了。但是后面这一串地址就要区分一下，我们把这一串地址又切成两段，前面一段称为基址，有什么用处呢？当我们告诉vue-router基址是多少之后，前段这一截它也不要了。那么剩余的部分vue-router就认为是真正的路由路径，对应的代码：
var router=new VueRouter({mode:'history',base:'/test-rsa/cmd/vue/router/',.....这样，我们就理解了base基址的作用，它直接决定vue-router怎么切路由。
最终得到的是/test.html，这就是得到的路由路径！
vue-router得到路由路径之后，接下来的工作就是找它对应的组件上台表演，但是我们看代码发现没有匹配的组件，完了！于是我们看到的结果就是一个空页面。换言之，就是整个系统都没有一个对应/test.html的组件。那么怎么办呢？
vue-router又提供一个*路由，意思是说，当所有都不匹配时，它做最后的接盘侠，那么我们就可以将这个*加上去，做为最后的接盘，代码如下：
...var router=new VueRouter({mode:'history',base:'/test-rsa/cmd/vue/router/',/* 定义两个路由规则 */routes:[{path:'/login',component:Login},{path:'/home',component: Home},{path:'*',component: {template:'您要找的页面不存在！！！
'}}]})此时再刷新，就可以看到“您要找的页面不存在！！！”
*路由除了可以给出一个明确的组件接盘之外，还可以使用重定向，比如说当路由不存在对应组件时，我们让它转到/home路由上，代码如下：
var router=new VueRouter({mode:'history',base:'/test-rsa/cmd/vue/router/',/* 定义两个路由规则 */routes:[{path:'/login',component:Login},{path:'/home',component: Home},{path:'*',redirect:'/home'}]})那么vue-router就会将它转到/home路由，接着再进来，就发现/home有对应的组件，那么就会将该组件搬到router-view，显示结果如下：
这篇写了什么是router-view、组件、路由路径以及相互的关系，原理明白之后，我们可以做一些设计用来验证理论。
来源：恋爱脑一点号
