1、子组件：

<template id="login">
  <div>我是login组件</div>
</template>
<template id="register">
  <div>我是register组件</div>
</template>
<template id="user">
  <div>我是user组件</div>
</template>

let Login = {
  template: '#login'
}
let Register = {
  template: '#register'
}
let User = {
  template: '#user'
}

2、父组件的视图层中使用router-link组件，必须要添加router-view组件

<div id="app">
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <router-link to="/user">用户中心</router-link>
  <router-view></router-view>
</div>

父组件的数据层引入路由对象（使用router方法就不需要在父组件中在申明子组件名）

let vm = new Vue({
  el: '#app',
  // 3、引入路由对象
  router,
  data() {
    return {}
  }
})

3、使用路由

Vue.use(VueRouter);

4、创建vueRouter路由对象

const router = new VueRouter({
  // 配置路由
  routes: [{
    path: '/login',
    name: 'Login',
    component: Login
  }, {
    path: '/register',
    name: 'Register',
    component: Register
  }, {
    path: '/user',
    name: 'User',
    component: User
  }]

});
代码演示：