路由控制组件切换

创建登录组件和注册组件，实现两个组件之间的切换，首先需要创建组件和路由匹配规则，代码如下。

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

<script>
  var login = {
    template: '<h1>登录</h1>'
  }
  var register = {
    template: '<h1>注册</h1>'
  }
  var router = new VueRouter({
    routes: [{
        path: '/login',
        component: login
      },
      {
        path: '/register',
        component: register
      }
    ]
  })
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
      login,
      register
    },
    router: router
  })
</script>

组件和匹配规则创建好之后，就可以实现两个组件之间的切换了，第一种形式是使用 a 标签进行路由跳转，代码如下。

视图层代码如下。

<div id="app" v-cloak>
  <a href="#/login">登录</a>
  <a href="#/register">注册</a>
  <router-view></router-view>
</div>

a 标签虽然可以实现路由之间的跳转，但不推荐使用，因为 Vue 专门提供了路由跳转的标签，代码如下。

<div id="app" v-cloak>
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <router-view></router-view>
</div>

代码解析如下。

使用 router-link 标签代替 a 标签。

优点：不需要写 # 号，to 属性后面直接是路由地址。

router-link 标签默认渲染成a标签，也可以渲染成其他标签，使用 tag 属性控制，例如可渲染成 span 标签。

<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register" tag="span">注册</router-link>

另外，使用 router-link 标签是可以设置高亮显示的，当单击了某个导航，该导航就会新增 router-link-active 这个类，设置类样式即可。

.router-link-active{color: red;}