Vue学习笔记【30】——Vue路由（watch属性的使用）

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

1. 监听data中属性的改变：

 <div id="app">
     <input type="text" v-model="firstName"> +
     <input type="text" v-model="lastName"> =
     <span>{{fullName}}</span>
   </div>
 ​
   <script>
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {
         firstName: 'jack',
         lastName: 'chen',
         fullName: 'jack - chen'
       },
       methods: {},
       watch: {
         'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
           this.fullName = newVal + ' - ' + this.lastName;
         },
         'lastName': function (newVal, oldVal) {
           this.fullName = this.firstName + ' - ' + newVal;
         }
       }
     });
   </script>
 ​

2. 监听路由对象的改变：

 <div id="app">
     <router-link to="/login">登录</router-link>
     <router-link to="/register">注册</router-link>
 ​
     <router-view></router-view>
   </div>
 ​
   <script>
     var login = Vue.extend({
       template: '<h1>登录组件</h1>'
     });
 ​
     var register = Vue.extend({
       template: '<h1>注册组件</h1>'
     });
 ​
     var router = new VueRouter({
       routes: [
         { path: "/login", component: login },
         { path: "/register", component: register }
       ]
     });
 ​
     // 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
       el: '#app',
       data: {},
       methods: {},
       router: router,
       watch: {
         '$route': function (newVal, oldVal) {
           if (newVal.path === '/login') {
             console.log('这是登录组件');
           }
         }
       }
     });
   </script>
 ​