路由场景模拟

路由就是根据一个路径（如，/student/9527）来确定应该在页面上显示什么内容的行为。

vue-router 作为 Vue 的一个库，旨在让我们能够在客户端，而非服务端来处理一个应用的路由。

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

编写父组件

如果一切从简，接下来你可以不创建 src 文件夹，将 .js 文件和 index.html 文件放在同一级目录也可以。

为了让接下来的功能比较清晰，我们先新建一个文件夹：src，然后新建一个 HTML 文件，作为入口：index.html 。

然后编写页面的基本结构：

<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        登录页/注册页
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:"#app"
  })
</script>

样式：

编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的 JS 文件中，我们新建一个 user 目录以及 login.js 及 register.js：

编写组件，这里我们只写模板，不写功能。

login.js 内容如下：

const loginForm = {
    template: '\
    <div>\
        <h2>登录页</h2> \
        用户名：<input type="text"><br/>\
        密码：<input type="password"><br/>\
    </div>\
    '
}

register.js 内容：

const registerForm = {
  template:'\
    <div>\
      <h2>注册页</h2> \
      用&ensp;户&ensp;名：<input type="text"><br/>\
      密&emsp;&emsp;码：<input type="password"><br/>\
      确认密码：<input type="password"><br/>\
    </div>\
    '
}

在父组件中引用

<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        <!--<loginForm></loginForm>-->
        <!--
            疑问：为什么不采用上面的写法？
            由于 html 是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>
            所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式
         -->
        <login-form></login-form>
        <register-form></register-form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        components: {
            loginForm,
            registerForm
        }
    })
</script>

效果：

问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的 html5 和 js 也能实现，但是官方推荐我们使用 vue-router 模块。