第八章 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}); //深度监视 ...
随机推荐
- springboot整合es客户端操作elasticsearch（五）
springboot整合es客户端操作elasticsearch的总结: 客户端可以进行可以对所有文档进行查询,就是不加任何条件: SearchRequest searchRequest = new ...
- pandas - parse-date
1.pd.read_csv()函数中parse_dates()参数 boolean. True -> 解析索引 boolean. If True -> try parsing the in ...
- 菜鸟系列docker——搭建私有仓库harbor(6)
docker 搭建私有仓库harbor 1. 准备条件 安装docker sudo yum update sudo yum install -y yum-utils device-mapper-per ...
- Spring+SpringMvc+Hibernate整合记录
Spring+SpringMvc+Hibernate+Maven整合各大配置文件记录 1.Idea新建的Maven架构 2.Maven的对象模型的内容 <project xmlns=" ...
- spring_mvc入门项目的小总结
1.先搭建一个maven的web项目 ,然后把文件夹完善一下,创建一个java的文件夹和resource的问件夹,并指定他们各自的功能. 导入pom.xml文件的依赖 <properties&g ...
- new与malloc有什么区别
转自http://www.cnblogs.com/QG-whz/p/5140930.html 前言 几个星期前去面试C++研发的实习岗位,面试官问了个问题: new与malloc有什么区别? 这是个老 ...
- P1417 烹调方案（思维+01背包）
(点击此处查看原题) 题意 有n种食材,每种食材有三个属性,ai,bi和ci,如果在t时刻完成第i样食材则得到ai-t*bi的美味指数,用第i件食材做饭要花去ci的时间.问在T时间内,什么样的烹调方案 ...
- GET POST请求区别
cookie .session.tokencookie:存放在浏览器相关的硬盘文件中session:存放在服务器端的内存中,退出后,被清空token:服务器端生成后,不保存,发给客户端,客户端的hea ...
- Jupyter修改默认文件保存路径
一.Jupyter安装 前提需要已经安装好python环境~ 接着,Python3x版本安装路径下执行pip命令安装 pip3 install Jupyter 看网速,安装完后会显示安装成功一段话即可 ...
- Stardew Valley(星露谷物语)Mod开发之路 1环境配置
首先来说明一下,我写这个章节本身也是对学习过程的记录,主要参考了http://canimod.com/guides/creating-a-smapi-mod中的内容.也推荐大家看看. *这些是我的开发 ...