Vue系列之 => Watch监视路由地址改变

第一种方式实现监听

 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
 8     <title>管理后台</title>
 9     <script src="../lib/jquery2.1.4.min.js"></script>
10     <script src="../lib/Vue2.5.17.js"></script>
11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
15         crossorigin="anonymous">
16 </head>
17 <style>
18     html,
19     body {
20         margin: 0;
21         padding: 0;
22     }
23
24     .header {
25         background-color: orange;
26         height: 80px;
27     }
28
29     .container {
30         width: 100%;
31         display: flex;
32         height: 400px;
33         padding: 0;
34         margin: 0;
35     }
36
37     .left {
38         background-color: pink;
39         flex: 2;
40     }
41
42     .right {
43         background-color: bisque;
44         flex: 8;
45     }
46     /* 动画 */
47     .header-enter,.header-leave-to {
48         opacity: 0;
49         transform: translateY(50px);
50     }
51     .header-enter-active,.header-leave-active{
52         transition: all 0.5s ease;
53     }
54
55 </style>
56
57 <body>
58     <div id="app">
59         <!-- 分析 -->
60         <!-- 我们要监听到文本框数据的改变，这样才能知道，什么时候去拼接出一个fullname -->
61         <input type="text" v-model="firstname" @keyup="getFullName"> +
62         <input type="text" v-model="lastname"  @keyup="getFullName"> +
63         <input type="text" v-model="fullname"> +
64     </div>
65
66     <script>
67
68         var vm = new Vue({
69             el: ‘#app‘,
70             data: {
71                firstname : ‘‘,
72                lastname : ‘‘,
73                fullname : ‘‘
74             },
75             methods: {
76                 getFullName(){
77                     this.fullname = this.firstname + ‘-‘ + this.lastname;
78                 }
79             },
80         });
81     </script>
82 </body>
83
84 </html>

第二种方式实现监听watch

 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
 8     <title>管理后台</title>
 9     <script src="../lib/jquery2.1.4.min.js"></script>
10     <script src="../lib/Vue2.5.17.js"></script>
11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
15         crossorigin="anonymous">
16 </head>
17 <style>
18     html,
19     body {
20         margin: 0;
21         padding: 0;
22     }
23
24     .header {
25         background-color: orange;
26         height: 80px;
27     }
28
29     .container {
30         width: 100%;
31         display: flex;
32         height: 400px;
33         padding: 0;
34         margin: 0;
35     }
36
37     .left {
38         background-color: pink;
39         flex: 2;
40     }
41
42     .right {
43         background-color: bisque;
44         flex: 8;
45     }
46     /* 动画 */
47     .header-enter,.header-leave-to {
48         opacity: 0;
49         transform: translateY(50px);
50     }
51     .header-enter-active,.header-leave-active{
52         transition: all 0.5s ease;
53     }
54
55 </style>
56
57 <body>
58     <div id="app">
59         <!-- 分析 -->
60         <!-- 我们要监听到文本框数据的改变，这样才能知道，什么时候去拼接出一个fullname -->
61         <input type="text" v-model="firstname"> +
62         <input type="text" v-model="lastname"> +
63         <input type="text" v-model="fullname"> +
64     </div>
65
66     <script>
67
68         var vm = new Vue({
69             el: ‘#app‘,
70             data: {
71                firstname : ‘‘,
72                lastname : ‘‘,
73                fullname : ‘‘
74             },
75             methods: {
76
77             },
78             watch : { //监听data中指定数据的变化，然后触发watch中对应的function处理函数
79                 firstname : function(){
80                     this.fullname = this.firstname + ‘-‘ + this.lastname
81                     console.log(‘firstname在变化‘);
82                 },
83                 // 提供了两个参数，一个是newVal,oldVal
84                 lastname : function(newVal,oldVal){
85                     this.fullname = this.firstname + newVal
86                     console.log(‘lastname在变化‘);
87                     console.log(newVal + ‘ ----- ‘ + oldVal);
88                 }
89             }
90         });
91     </script>
92 </body>
93
94 </html>

监视路由地址改变

  1 <!DOCTYPE html>
  2 <html>
  3
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
  8     <title>管理后台</title>
  9     <script src="../lib/jquery2.1.4.min.js"></script>
 10     <script src="../lib/Vue2.5.17.js"></script>
 11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
 13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 15         crossorigin="anonymous">
 16 </head>
 17 <style>
 18     html,
 19     body {
 20         margin: 0;
 21         padding: 0;
 22     }
 23
 24     .header {
 25         background-color: orange;
 26         height: 80px;
 27     }
 28
 29     .container {
 30         width: 100%;
 31         display: flex;
 32         height: 400px;
 33         padding: 0;
 34         margin: 0;
 35     }
 36
 37     .left {
 38         background-color: pink;
 39         flex: 2;
 40     }
 41
 42     .right {
 43         background-color: bisque;
 44         flex: 8;
 45     }
 46     /* 动画 */
 47     .header-enter,.header-leave-to {
 48         opacity: 0;
 49         transform: translateY(50px);
 50     }
 51     .header-enter-active,.header-leave-active{
 52         transition: all 0.5s ease;
 53     }
 54
 55 </style>
 56
 57 <body>
 58     <div id="app">
 59         <router-link to="/login">登录</router-link>
 60         <router-link to="/register">注册</router-link>
 61         <router-view></router-view>
 62     </div>
 63     <template id="login">
 64         <div>
 65             <h1>我是登录界面</h1>
 66         </div>
 67     </template>
 68     <template id="register">
 69         <div>
 70             <h1>我是注册界面</h1>
 71         </div>
 72     </template>
 73
 74     <script>
 75         var login = {
 76             template : ‘#login‘
 77         };
 78         var register = {
 79             template : ‘#register‘
 80         };
 81
 82         var routerObj = new VueRouter({
 83             routes : [
 84                 { path : ‘/‘ , component : login },
 85                 { path : ‘/login‘ , component : login },
 86                 { path : ‘/register‘ , component : register },
 87             ]
 88         })
 89
 90         var vm = new Vue({
 91             el: ‘#app‘,
 92             data: {
 93                firstname : ‘‘,
 94                lastname : ‘‘,
 95                fullname : ‘‘
 96             },
 97             methods: {
 98
 99             },
100             router : routerObj,
101             watch : {
102                 ‘$route.path‘ : function(newVal,oldVal){
103                    if(newVal === ‘/login‘){
104                        console.log(‘欢迎进入登录！‘);
105                    }else if(newVal === ‘/register‘){
106                        console.log(‘欢迎注册‘);
107                    };
108                 }
109             }
110         });
111     </script>
112 </body>
113
114 </html>

原文地址：https://www.cnblogs.com/winter-shadow/p/10222667.html

时间： 2024-11-02 01:19:01

Vue系列之 => Watch监视路由地址改变的相关文章

Vue.js 相关知识（路由）

1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入vue-router.js(下载地址:https://router.vuejs.org/) 例:SPA页面(Single Page Application,将一个网站的所有页面写在一个文件,通过不同的div进行区分,再通过div的显示.隐藏实现跳转效果) 定义组件对象(页面).组件模板.注册组件定义

Vue中使用children实现路由的嵌套

Vue中使用children实现路由的嵌套相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&

asp.net core 系列 8 Razor框架路由(下)

三.页面路由操作约定接着上篇讲asp.net core 系列 7 Razor框架路由.在上篇继续第三节 "页面路由操作约定" 的最后一小节 AddPageRoute . 3.3. 配置页面路由AddPageRoute 使用 AddPageRoute 配置路由,该路由与指定页面关联, 使用指定的路由生成页面链接. AddPageRoute 使用 AddPageRouteModelConvention 建立路由. 示例应用为 Privacy.cshtml 创建指向 /ThePrivacy

Vue--watch控制监听路由地址-组件的变化----'$route.path': function (newVal, oldVal)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

《Vue系列》timeago.js将时间戳转换成“几天前”“几分钟前”等格式

<Vue系列>timeago.js将时间戳转换成"几天前""几分钟前"等格式原文地址:https://www.cnblogs.com/zxlb/p/12318275.html

AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件 AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Rou

Weblogic 12c ip 地址改变如何配置

Weblogic 12c ip 地址改变如何配置 1. 在weblogic 安装的路径找到之前创建的域下的jwxt-jdbc.xml文件:如我安装的路径为 (C:\Oracle\Middleware\Oracle_Home\user_projects\domains\xgjw_domain\config\jdbc) 在改路径下修改所有后缀名*.xml文件配置的url的ip地址: 例如:修改数据源url的ip地址为变动后的ip:如之前为(10.10.160.17 变为 10.17.1.236) 2

关于TFS地址改变后，项目迁移的问题。

经常遇到TFS的服务器地址改变,以至于项目全部不能用,如果全部重新打开,然后重新映射,是件很费时.费事的事.但其实是有简单方法的. 找到解决方法文件,即SLN文件. 用记事本打开,找到SccTeamFoundationServer这一节,看到了吧,后面的就是服务器地址,改地址即可.[修改项目的地址] 但并不是这么简单的,这里改的仅仅是项目的地址,但TFS程序的地址还得改.所以单独改了这个是不行的.还得改一处如果不是XP,则位置在 C:\Users\[用户名]\AppData\Local\Mic

asp.net core 系列 7 Razor框架路由(上)

一.概述在上二篇中,主要是介绍了asp.net core mvc中路由的使用,这篇继续介绍路由在ASP.NET Core Razor中的使用.Razor Pages应该使用默认的传统路由,从应用程序的Pages文件夹中提供命令资源.还可以使用其他约定来自定义 Razor Pages 路由行为. 在ASP.NET Core MVC 中是使用路由中间件来匹配传入请求的 URL 并将它们映射到操作(action).而ASP.NET Core Razor使用页面路由和应用模型提供程序约定,来控制 R