<!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. Email功能的设定

    在前期制定发送邮件功能时,都是使用导入import smtplib模块来实现,虽说能实现, 但是对新人.刚接触的来说不太友好,虽然网上五花八门的教程一大推,但还是要自己花不少时间才搞定(笔者就是) 在 ...

  2. Tool.js（javascript帮助类）

    //string.format $.format = function (source, params) { ) return function () { var args = $.makeArray ...

  3. 用Blackbox Exporter to Monitor web和端口

    1.按照exporter .wget https://github.com/prometheus/blackbox_exporter/releases/download/v0.12.0/blackbo ...

  4. sql sever 授予用户create table权限

    sql server2008的用户权限管理及其细致.此处我也不知道是表扬还是批评.所以经常会遇到各种“对不起您没有**权限”的问题. 本次遇到的问题机器常见.在尝试修改数据库结构时提示"没有 ...

  5. KUDU数据导入尝试一：TextFile数据导入Hive,Hive数据导入KUDU

    背景 SQLSERVER数据库中单表数据几十亿,分区方案也已经无法查询出结果.故:采用导出功能,导出数据到Text文本(文本>40G)中. 因上原因,所以本次的实验样本为:[数据量:61w条,文 ...

  6. hive的hiveserver2模式启动不起来，发现Hadoop一直处于安全模式

    hive的hiveserver2模式启动不起来,发现Hadoop一直处于安全模式 命令介绍 命令hadoop fs –safemode get 查看安全模式状态 命令hadoop fs –safemo ...

  7. LeetCode 142——环形链表II(JAVA)

    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...

  8. INPUT和CONSTRUCT指令——范例报表查询，作用让用户输入数据，自动生成SQL的WHERE条件，带开窗查询

    INPUT指令 说明:1. 当程序执行到INPUT指令时,会将控制权交给用户,让用户输入数据.2. 用户输入完字段的数据,会将数据回传给程序中的变量接收.3. 只要执行到INPUT的指令,程序会将每个 ...

  9. X86逆向10：学会使用硬件断点

    本节课我们将学习硬件断点的使用技巧,硬件断点是由硬件提供给我们的一组寄存器,我们可以对这些硬件寄存器设置相应的值,然后让硬件帮我们断在需要下断点的地址上面,这就是硬件断点,硬件断点依赖于寄存器,这些寄 ...

  10. django 项目开发及部署遇到的坑

    1.django 连接oracle数据库遇到的坑 需求:通过plsql建立的oracle数据表,想要django操作这几个表 python manage.py inspectdb table_name ...