第八章 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}); //深度监视 ...
随机推荐
- Metasploit入门教程
0.Metasploit简介 Metasploit是一款开源的渗透测试框架平台,到目前为止,msf已经内置了数千个已披露的漏洞相关的模块和渗透测试工具,模块使用ruby语言编写,这使得使用者能够根据需 ...
- hbase数据导出和恢复 设置双master + 查看hbase表占用磁盘大小
1.备份TETST111hbase org.apache.hadoop.hbase.mapreduce.Export TEST111 /do1/hh2.drop 掉test111表 -- 只能dro ...
- Spring MVCD框架中调用HanLP分词的方法
项目简要:关于java web的一个项目,用的Spring MVCd 框架.鉴于参与此次项目的人中并不是所人都做的Spring,为了能够提高效率,建议大家是先抛开SPring来写自己负责的模块,最后再 ...
- 题解 洛谷P1311 【选择客栈】
可能这做法是最奇葩的ST表 我们枚举k,计算每种色调的客栈各有多少种方法 我们利用一种奇怪的思想:除了不可行的,剩下的都是可行的 所以我们先求出 每种颜色的客栈随机选择两个,一共有多少种结果 接着减 ...
- php 正则替换特殊字符 和检测是否是中文
如果是只想输入中文的话,就这么写,要注意是分gb2312和utf-8的哦: gb2312:if(!preg_match("/^[".chr(0xa1)."-". ...
- 浅谈CSRF（Cross-site request forgery）跨站请求伪造
目录 浅谈CSRF(Cross-site request forgery)跨站请求伪造 CSRF是什么 CSRF攻击原理 CSRF攻击防范 浅谈CSRF(Cross-site request forg ...
- poj 2226 Muddy Fields (二分图)
大意:给定n*m网格, 每个格子为泥地或草地, 可以用一些长度任意宽度为1的木板盖住泥地, 要求不能盖到草地, 求最少要多少块木板能盖住所有泥地. 最小点覆盖板子题, 建图跑最大匹配即可. #incl ...
- CF 666C & 牛客 36D
给定字符串S, 求有多少长为$n$的字符串T, 使得S为T的子序列. 可以得到转移矩阵为 $\begin{equation}A=\begin{bmatrix}25 & 0 & 0 &a ...
- Spring实战（七）Bean 的作用域
1.Spring中bean 的多种作用域 单例(Singleton):整个应用中只创建一个bean 的实例,Spring默认创建单例的bean: 原型(Prototype):每次注入or通过Sprin ...
- react中数据持久化缓存redux-persist
一.安装redux-persist: npm install redux-persist --save 二..babelrc中增加redux-persist配置: "plugins" ...