<!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"  content="ie=edge">

     <title>Document</title>

     <!--导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

     <!-- 1.导入包 -->

     <script src="../lib/vue-router-3.0.6.js"></script>

   </head>

   <body>

       <div id="app">

       <router-link to="/login">登录</router-link>

       <router-link to="/register">注册</router-link>

     <!-- 容器 -->

     <router-view></router-view>

       </div>

       <script>

       //2.创建子组件

       var login={

         template:'<h3>这是登录子组件，这个组件是 江小白 开发的。</h3>'

       }

       var register={

         template:'<h3>这是注册子组件，这个组件是 白小江 开发的。</h3>'

       }

       //3.创建一个路由对象

       var router=new VueRouter({

         routes:[//路由规则数组

           {path:'/',redirect:'/login'},

           {path:'/login',component:login},

           {path:'/register',component:register}

         ],

         linkActiveClass:'myactive'  //和激活相关的类

       })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{ },

         methods:{ },

         // router:router

           router,

           watch:{

             //this.$route.path

             '$route.path':function(newVal,oldVal){

               // console.log(newVal + ' --- ' +oldVal)

               if(newVal==='/login'){

                 console.log('欢迎进入登录页面')

               }else if(newVal==='/register'){

                 console.log('欢迎进入注册页面')

               }

             }

           }

           });

       </script>

   </body>

 </html>

第八章 watch监听 84 watch-监视路由地址的改变的更多相关文章

  1. angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题

     壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...

  2. JavaScript监听页面可见性（焦点）同时改变title的三种方法

    JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...

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

    第一种方式实现监听 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. vue watch 可以监听子组件props里面属性的改变

    子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');

  5. 第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第八章 watch监听 86 watch、computed、methods的对比

  7. 第八章 watch监听 85 computed-计算属性的使用和3个特点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. layui 监听checkbox 、radio、switch选中改变事件

    form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log( ...

  9. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

随机推荐

  1. typescript实现类规则

    备注: 单独的 index.d.ts对于代码实现没有约束性,将约束和实现写在一个页面里有约束性,或者使用如下: // clock.interface.ts export interface Clock ...

  2. Centos7源码安装Apache和PHP

    源码安装Apache 安装需要的依赖 yum -y install gcc autoconf automake make pcre pcre-devel openssl openssl-devel​# ...

  3. 【Python】if __name__ == '__main__' 含义解析

    相信大家在看别人的python程序时,可能会在大部分的程序后看到标题这段代码,这里解释下它的意义.总的来说,这句代码的作用就是既能保证当前的.py文件直接运行,也能保证其可以作为模块被其他.py文件导 ...

  4. sqarkSQL hiveSql

    查看数据库 show databases; 进入数据库 use 库名 查看表 show tables: select * from 表名 hdfs传输spark sql查询 hive找到指定路径sql ...

  5. 石子合并2——区间DP【洛谷P1880题解】

    [区间dp让人头痛……还是要多写些题目练手,抽空写篇博客总结一下] 这题区间dp入门题,理解区间dp或者练手都很妙 ——题目链接—— (或者直接看下面) 题面 在一个圆形操场的四周摆放N堆石子,现要将 ...

  6. Win32汇编语言语法基础

    汇编语言(assembly language)是一种用于电子计算机.微处理器.微控制器或其他可编程器件的低级语言,亦称为符号语言.在汇编语言中,用助记符(Mnemonics)代替机器指令的操作码,用地 ...

  7. 深入理解Redux之手写React-Redux

    React-Redux主要由两部分组成,一是Provider(提供者),顾名思义作用就是提供状态数据. 另一部分是connect函数,它的作用是把UI组件和状态数据“连接”起来,实现了Model和Vi ...

  8. 《深入理解 Java 虚拟机》学习 -- 垃圾回收算法

    <深入理解 Java 虚拟机>学习 -- 垃圾回收算法 1. 说明 程序计数器,虚拟机栈,本地方法栈三个区域随线程而生,随线程而灭,这几个区域的内存分配和回收都具备确定性 Java 堆和方 ...

  9. 怎样理解 Vue 中的 v-if 和 v-show ?

    1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:n ...

  10. 进阶Java编程(8)反射应用案例

    1,反射实例化对象 经过一系列分析之后可以发现虽然获得了Class类的实例化对象但是依然觉得这个对象获取的意义不是很大,所以为了进一步的帮助大家理解反射的核心意义所在,下面将通过几个案例进行说明(都是 ...