3.5 组件路由

路由的使用效果，就类似于页面跳转，但是vue实际上是单页面应用，这类网页从开始到使用结束，实际上就在index.html里没有跳转过，只是不停地切换它内部的app这个元素里的内容。
对于组件的切换，就使用了路由这样的概念。路由需要配置。
1.配置路由
首先需要把组件和url的模式绑定起来，这部分在（使用vue-cli创建的项目）src/router下的index.js定义
这部分代码就是路由，这里已经配置好了四个路由：
我们只需要关注这部分代码。其中path就是url模式，name是这个模式的名字，component是这个url模式对应的是哪个组件。用上面的代码举例：
这是主页http://localhost:8080/，它对应了Home这个组件
那么http://localhost:8080/login就对应了Login这个组件
这部分的配置和jsp的servlet配置非常类似。

2.路由后填充的位置
访问http://localhost:8080/login这样的url后，并不是页面全部都替换成Login组件的内容，主页仍然是以index.html为模板，然后主要组件仍然是App.vue。那这个“被点击”到的组件该怎么显示？显示到哪里呢？
答案是router-view标签，被点击后的组件，就会填满router-view所在的位置，所以这个时候app.vue应该是这么写，也就是必须要有一个router-view标签：
如第三行代码所示。这种模式是假设所有网页的头部菜单和底部信息都是一样的。这样点击了哪个模式，就找到对应的组件，然后取代App.vue中间的router-view标签。