第八章 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}); //深度监视 ...
随机推荐
- typescript实现类规则
备注: 单独的 index.d.ts对于代码实现没有约束性,将约束和实现写在一个页面里有约束性,或者使用如下: // clock.interface.ts export interface Clock ...
- Centos7源码安装Apache和PHP
源码安装Apache 安装需要的依赖 yum -y install gcc autoconf automake make pcre pcre-devel openssl openssl-devel# ...
- 【Python】if __name__ == '__main__' 含义解析
相信大家在看别人的python程序时,可能会在大部分的程序后看到标题这段代码,这里解释下它的意义.总的来说,这句代码的作用就是既能保证当前的.py文件直接运行,也能保证其可以作为模块被其他.py文件导 ...
- sqarkSQL hiveSql
查看数据库 show databases; 进入数据库 use 库名 查看表 show tables: select * from 表名 hdfs传输spark sql查询 hive找到指定路径sql ...
- 石子合并2——区间DP【洛谷P1880题解】
[区间dp让人头痛……还是要多写些题目练手,抽空写篇博客总结一下] 这题区间dp入门题,理解区间dp或者练手都很妙 ——题目链接—— (或者直接看下面) 题面 在一个圆形操场的四周摆放N堆石子,现要将 ...
- Win32汇编语言语法基础
汇编语言(assembly language)是一种用于电子计算机.微处理器.微控制器或其他可编程器件的低级语言,亦称为符号语言.在汇编语言中,用助记符(Mnemonics)代替机器指令的操作码,用地 ...
- 深入理解Redux之手写React-Redux
React-Redux主要由两部分组成,一是Provider(提供者),顾名思义作用就是提供状态数据. 另一部分是connect函数,它的作用是把UI组件和状态数据“连接”起来,实现了Model和Vi ...
- 《深入理解 Java 虚拟机》学习 -- 垃圾回收算法
<深入理解 Java 虚拟机>学习 -- 垃圾回收算法 1. 说明 程序计数器,虚拟机栈,本地方法栈三个区域随线程而生,随线程而灭,这几个区域的内存分配和回收都具备确定性 Java 堆和方 ...
- 怎样理解 Vue 中的 v-if 和 v-show ?
1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:n ...
- 进阶Java编程(8)反射应用案例
1,反射实例化对象 经过一系列分析之后可以发现虽然获得了Class类的实例化对象但是依然觉得这个对象获取的意义不是很大,所以为了进一步的帮助大家理解反射的核心意义所在,下面将通过几个案例进行说明(都是 ...