侦听器---监听路由的变化

<div class="container">
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div> <template id="login">
    <h2>登录</h2>
  </template> <template id="register">
    <h2>注册</h2>
  </template>
</div>

// 创建两个组件
let login = {
  template: '#login'
}
let register = {
  template: '#register'
}
// 创建路由对象
let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: '/login'
  }, {
    path: '/login',
    component: login
  }, {
    path: '/register',
    component: register
  }]
})
var vm = new Vue({
  el: '#app',
  data: {},
  // 使用路由
  router,
  //侦听器---监听路由的变化
  watch: {
    '$route.path': function (newVal, oldVal) {
      if (newVal == '/login') {
        console.log('登录页面');
      }
      if (newVal == '/register') {
        console.log('注册页面');
      }
    }
  }
})