1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible"  content="ie=edge">
  8.      <title>Document</title>
  9.      <!--导入Vue的包-->
  10.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  11.      <!-- 1.导入包 -->
  12.      <script src="../lib/vue-router-3.0.6.js"></script>
  13.    </head>
  14.  
  15.    <body>
  16.        <div id="app">
  17.        <router-link to="/login">登录</router-link>
  18.        <router-link to="/register">注册</router-link>
  19.  
  20.      <!-- 容器 -->
  21.      <router-view></router-view>
  22.  
  23.        </div>
  24.  
  25.        <script>
  26.        //2.创建子组件
  27.        var login={
  28.          template:'<h3>这是登录子组件，这个组件是 江小白 开发的。</h3>'
  29.        }
  30.  
  31.        var register={
  32.          template:'<h3>这是注册子组件，这个组件是 白小江 开发的。</h3>'
  33.        }
  34.  
  35.        //3.创建一个路由对象
  36.        var router=new VueRouter({
  37.          routes:[//路由规则数组
  38.            {path:'/',redirect:'/login'},
  39.            {path:'/login',component:login},
  40.            {path:'/register',component:register}
  41.          ],
  42.          linkActiveClass:'myactive'  //和激活相关的类
  43.        })
  44.  
  45.            //创建 Vue 实例，得到 ViewModel
  46.            var vm =  new Vue({
  47.                el:'#app',
  48.          data:{ },
  49.          methods:{ },
  50.          // router:router
  51.            router,
  52.            watch:{
  53.              //this.$route.path
  54.              '$route.path':function(newVal,oldVal){
  55.                // console.log(newVal + ' --- ' +oldVal)
  56.                if(newVal==='/login'){
  57.                  console.log('欢迎进入登录页面')
  58.                }else if(newVal==='/register'){
  59.                  console.log('欢迎进入注册页面')
  60.                }
  61.              }
  62.            }
  63.            });
  64.        </script>
  65.    </body>
  66.  </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. cisco上配置 pppoe拨号

    r1(config)#vpdnenable                      开启虚拟拨号VPDN r1(config)#vpdn-groupoffice                定义组 ...

  2. ERNIE学习笔记

    https://ai.baidu.com/forum/topic/show/954092 学习ERNIE的输入部分 输入 一共有五个部分组成,每个部分之间用分号;隔开: · token_ids:输入句 ...

  3. Windows环境下安装Hadoop+Hive的使用案例

    Hadoop安装: 首先到官方下载官网的hadoop2.7.7,链接如下 https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/ 找网盘的 ...

  4. Second largest node in the BST

    Find the second largest node in the BST 分析: 如果root有右节点,很明显第二大的node有可能在右子树里.唯一不满足的条件就是右子树只有一个node. 这个 ...

  5. SQLite基础-4.数据定义语言(DDL)

    目录 一.创建数据库 1. 创建方式 2. 数据库命名规范 二. 创建表 1. 基本用法 2. 数据表命名规范 3. 字段命名规范 三. 删除表 一.创建数据库 1. 创建方式 在第二章中我们讲了如何 ...

  6. 怎样解决SQL Server内存不断增加问题

    原文:怎样解决SQL Server内存不断增加问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn. ...

  7. python 类(3) property

    class PetCat(): """ 家猫类""" def __init__(self, name, age): self.name = ...

  8. WPF的硬件加速

    wpf根据硬件 可以做出三档的渲染 dx7以下 第0档  不支持硬件加速 dx7-dx9 第1档, 不支持所有硬件加速,但支持一部分 dx9 以上 支持所有硬件加速 可以用编程的方式取代 当前设备处于 ...

  9. Struts框架的使用初步

    Struts框架的使用初步: A:Apache下载struts.2.1.8.rar包. B:解压空工程,进入apps目录. C:将struts2的基本jar包拷到工程的lib目录中. D:配置web. ...

  10. python中关于空的说法

    0908自我总结 python中关于空的说法 python中表示空的数据 常量None 常量False 任何形式的数值类型零,如0,0L,0.0,0j 空的序列[],() 空的字典{} 用户自定义的n ...