第八章 watch监听 84 watch-监视路由地址的改变
<!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-监视路由地址的改变的更多相关文章
- angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- JavaScript监听页面可见性（焦点）同时改变title的三种方法
JavaScript监听页面可见性(焦点)同时改变title的三种方法 本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visib ...
- Vue系列之 => Watch监视路由地址改变
第一种方式实现监听 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue watch 可以监听子组件props里面属性的改变
子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');
- 第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第八章 watch监听 86 watch、computed、methods的对比
- 第八章 watch监听 85 computed-计算属性的使用和3个特点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- layui 监听checkbox 、radio、switch选中改变事件
form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log( ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
随机推荐
- 【VS开发】【Live555-rtsp】在windows 使用vs2008编译live555
在windows 使用vs2008编译live555 基于 liveMedia的程序,需要通过继承UsageEnvironment抽象类和TaskScheduler抽象类,定义相应的类来处理事件调度, ...
- 论文阅读 | Robust Neural Machine Translation with Doubly Adversarial Inputs
(1)用对抗性的源实例攻击翻译模型; (2)使用对抗性目标输入来保护翻译模型,提高其对对抗性源输入的鲁棒性. 生成对抗输入:基于梯度 (平均损失) -> AdvGen 我们的工作处理由白盒N ...
- c++面向对象程序设计第四章课后习题
这是书上的习题,我使用的是VS2010运行编译的 原习题: 4.有两个矩阵a和b,均为两行三列.求两个矩阵之和.重载运算符“+”,使之能用于矩阵相加.如c=a+b. #include<iostr ...
- RFID/13.56MHZ/NFC线圈防干扰原理-附磁导材料防干扰原理 20191128
RFID/13.56MHZ/NFC之间采用电磁感应方式进行通信. 1.铁氧体.硅钢片等导磁材料的相对磁导率比较高,多年前在变压器中已经有广泛的应用.有防止磁通饱和,提高变压器感应效率的作用. 2.RF ...
- Oracle- 数据库知识回顾
数据库知识回顾: sql语句的语法规范: sql语句不区分大小写,习惯上系统的保留字.关键字.函数名称大写,表名和列名小写 使用空格和换行分隔单词效果一样,一般情况下独立的整句不换行,不同的子句需要换 ...
- Synchronize和ReentrantLock区别
转自:https://blog.csdn.net/m0_37700275/article/details/83151850 目录介绍1.Synchronize和ReentrantLock区别 1.1 ...
- 使用python操作zookeeper
kazoo 介绍 zookeeper的开发接口以前主要以java和c为主,随着python项目越来越多的使用zookeeper作为分布式集群实现,python的zookeeper接口也出现了很多,现在 ...
- JSON函数表
jsoncpp 主要包含三个class:Value.Reader.Writer.注意Json::Value 只能处理 ANSI 类型的字符串,如果 C++ 程序是用 Unicode 编码的,最好加一个 ...
- NYOJ 石子合并（一） 区间dp入门级别
描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆.求出总的代价 ...
- JS downLoad
$.fileDownload(url, { httpMethod: 'GET', data: null, prepareCallback: function (url) { layer.msg(&qu ...