基本使用
- $route.path：获取当前路由，页面刷新不会触发
- created：页面打开和刷新会执行
示例代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>watchs使用</title> 8. </head> 9. <body> 10. 11. <div id="app"> 12. 13. <router-link to='/login'>登录</router-link> 14. <router-link to='/registered'>注册</router-link> 15. <router-view></router-view> 16. <h3>{{mes}}</h3> 17. </div> 18. 19. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 20. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 21. 22. <!-- 1.导入路由文件 --> 23. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 24. 25. 26. <script> 27. // 创建组件 28. const login={ 29. template:"<p>登录</p>" 30. 31. } 32. const registered={ 33. template:"<p>注册</p>" 34. 35. } 36. 37. // 路由与组件关联 38. const router = new VueRouter({ 39. routes:[ 40. {path:'/login',component:login}, 41. {path:'/registered',component:registered} 42. ] 43. } 44. ) 45. 46. 47. // 注册组件 48. var vm = new Vue({ 49. el:'#app', 50. data:{ 51. mes:"欢迎！！！" 52. }, 53. methods:{ 54. 55. }, 56. // 页面打开和刷新会执行 57. created(){ 58. const path = this.$route.path; 59. if(path==="/login"){ 60. this.mes = "欢迎进入登录页面" 61. }else if (path === "/registered"){ 62. this.mes = "欢迎进入注册页面" 63. } 64. 65. 66. }, 67. router:router, 68. // 监听vm实例所有属性变化 $route.path 获取当前路由，页面刷新不会触发 69. watch:{ 70. '$route.path':function(newVal){ 71. console.log(newVal) 72. if(newVal==="/login"){ 73. this.mes = "欢迎进入登录页面" 74. }else if (newVal === "/registered"){ 75. this.mes = "欢迎进入注册页面" 76. } 77. 78. } 79. } 80. }) 81. 82. </script> 83. 84. </body> 85. </html>
对象格式
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>监听器</title> 7. </head> 8. <body> 9. <div id="app"> 10. <input type="text" v-model="username"> 11. </div> 12. 13. <!-- 官网提供的axios在线地址 --> 14. <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 15. 16. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 17. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 18. 19. <script> 20. const app = new Vue({ 21. el: '#app', 22. data: { 23. username: '大海' 24. }, 25. //所有的侦听器，都应该被定义到watch节点下 26. watch: { 27. username: { 28. // 侦听器的处理函数 29. handler(newVal, odlVal) { 30. console.log(newVal, odlVal) 31. }, 32. // immediate 选项的默认值是 false 33. // immediate 的作用是：进入页面控制侦听器是否自动触发一次！ 34. immediate: true 35. } 36. } 37. }) 38. </script> 39. 40. 41. </body> 42. </html>
深度侦听
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>监听器</title> 7. </head> 8. <body> 9. <div id="app"> 10. <input type="text" v-model="username"> 11. </div> 12. 13. <!-- 官网提供的axios在线地址 --> 14. <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 15. 16. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 17. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 18. 19. <script> 20. const app = new Vue({ 21. el: '#app', 22. data: { 23. username: '大海' 24. }, 25. //所有的侦听器，都应该被定义到watch节点下 26. watch: { 27. username: { 28. // 侦听器的处理函数 29. handler(newVal, odlVal) { 30. console.log(newVal, odlVal) 31. }, 32. // immediate 选项的默认值是 false 33. // immediate 的作用是：进入页面控制侦听器是否自动触发一次！ 34. immediate: true 35. } 36. } 37. }) 38. </script> 39. 40. 41. </body> 42. </html>
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>监听器</title> 7. </head> 8. <body> 9. <div id="app"> 10. <input type="text" v-model="info.username"> 11. </div> 12. 13. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15. 16. <script> 17. const app = new Vue({ 18. el: '#app', 19. data: { 20. info: { 21. username: '大海', 22. address: { 23. city: '北京' 24. } 25. } 26. 27. }, 28. //所有的侦听器，都应该被定义到watch节点下 29. watch: { 30. 31. // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号 32. 'info.username'(newVal) { 33. console.log(newVal) 34. } 35. } 36. }) 37. </script> 38. 39. 40. </body> 41. </html>
