2.6.1 再建一个页面

一. 备份App.vue并修改
之前我们一直在App.vue这个页面，如果不修改App.vue，是没有办法进入别的页面的。
首先，我们要保留App.vue的所有代码，把App.vue的所有代码选中，复制后粘贴到views/Home页面，覆盖掉Home原来的代码：
同时修改这两个地方的两个点改成@，@代表src文件夹

接下来，我们要改掉App.vue。
改成下面这样（其他所有代码都删掉），异常简单了：
<template>
    <router-view/>
</template>
我们可以启动项目，检查一下有没有出错，做了这一步理论上是没有任何变化的。

二.新建页面
现在我们要新建一个，最简单的方法，就是直接复制一份App.vue，然后再修改。
复制App.vue，然后粘贴在views文件夹里面，里面已经有一个Home.vue
接下来我们修改Login.vue，首先改掉HTML部分，
<template>
    <form action="">
    <span>账号</span>
    <input type="text" name="username"/>
    <br/>
    <span>密码</span>
    <input type="password" name="psw"/>
    <br/>
    <input type="button" value="登录"/>
    </form>
</template>
现在我们要看这个页面，但是如何进入页面就显示这个Login页面呢？（其实Login仅仅是一个组件，暂且这么称呼）
需要修改这个文件route/index.js，
打开后我们看到这个：
这里就把Home页面绑定了默认“/”，所以已进入localhos:8080/,就会进入Home组件，而Home组件现在就是原来的App.vue。现在我们要增加登录页面进去。在被注释掉的地方已经有了，把这段复制下来，拷贝到上图第10行代码的位置：
现在变成这样了：
复制进来的代码第13行是简便写法，这样就不用写第2行的引用了
现在启动项目，访问网址后仍然是App.vue，在网址后面输入Login，然而我们访问后出错了：
意思就是Login.vue里面Helloworld引用了但是没有使用，我们打开Login.vue，
删除引入Helloworld的相关语句，第14行，第19行，顺便把第17行组件的名字改成Login：
这个时候，http://localhost:8080/#/Login就能正确显示登录了：
如果要看到以前写的App.vue的代码，访问的URL最后删掉login就可以了（也就是http://localhost:8080）