有一些知识理解了简单，不理解很绕，vue-router就是这种代表。由于它是vue标配的路由系统，所以我们需要好好研究下。

我们把速度降慢点，争取一篇解决一个问题就可以了。

单页面应用

单页面应用，就是指浏览器将页面加载好之后，它就不动了。典型的就是index.html页面，当它从服务端返回之后，就再也不会请求第二次了。这是一种很奇特的思路，如果第一次接触会有点懵。为什么呢？

由于在一般认知中，后端不是有一堆HTML吗？我要哪个就去请求哪一个，但是目前不这么弄了，单页面就是一个网页，也就是一个网站就只有一个index.html。

如图所示，index.html除了有一个<router-view>什么都没了，超级简洁。

接着我们看下vue和vue-router的代码，如下：

<div id="app">
    <router-view></router-view>
</div>

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

<script>
    const Login = {template: '<h2>我是登录页</h2>'}
    const Home = {template: '<h2>欢迎访问我的主页！！！</h2>'}
    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
    })
</script>

其中，vue-router就是一个js文件，需要提前下载放到IDE中，方便调试。这篇我们就解释清楚这个代码是怎么回事。

具体流程

第一，我们在IDE中写了一个页面名为“test.html”（代码在上方，复制粘贴即可），IDE可以是vs code或webstorm等都可以，接着点击运行，那么IDE就会开一个内置的服务器运行，在浏览器中会出现这种样式的URL：

http://localhost:63342/test-rsa/cmd
/vue/router/test.html

浏览器获取test.html页面之后，vue和vue-router开始激活了。这一点需要特别注意，就是无论怎样，先从服务器取页面是第一步，取到页面之后执行脚本，vue-router才能激活工作。

之后，浏览器再也不会请求test.html，除非刷新。

第二步，页面开始执行脚本，查找路由路径。那么我们就会问，什么是路由路径呢？

我们这里实验用的是vue-router，而且是history模式，那么路由路径就可以简单的认为是哪一个组件该上场了。

在上面提到<router-view>这个组件，它就像一个舞台，这个形容很贴切，就是提供一个空间，组件就像表演者一样可以轮流上场表演，而路由路径就是具体决定哪个表演者上台。如下图所示：

下面是有许多组件想上去表演，但是组件得有一个标识，就好比点名一样，我得知道喊哪一个。大家可能会想，直接喊组件名就可以了呀。但是在页面这个场景下，我们喊的是路由不是组件，列如在网络世界中，是按路由请求的。清楚了，我们把这个组件再起一个路由的名字，正好就对应上了。当别人请求路由路径时，就等价于喊组件名。

理解了原理，代码一下就变的很自然：

routes:[
    {
        path:'/login',
        component:Login
    },
    {
        path:'/home',
        component: Home
    }
]

这个就是路由映射关系，给组件起一个路由名，或者反过来说，给路由绑定一个组件。那么后面我们就只需要喊路由名，就可以把组件搬上去表演。

第一次请求之后发生了什么？

我们再回到故事的开头，当我们请求
http://localhost:63342/test-rsa/cmd/vue/router/test.html这个页面之后，服务器就返回一个页面，接着执行<script>脚本，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:'<h2>您要找的页面不存在！！！</h2>'
            }
        }
    ]
})

此时再刷新，就可以看到“您要找的页面不存在！！！”

重定向

*路由除了可以给出一个明确的组件接盘之外，还可以使用重定向，列如说当路由不存在对应组件时，我们让它转到/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、组件、路由路径以及相互的关系，原理清楚之后，我们可以做一些设计用来验证理论。