第八章 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}); //深度监视 ...
随机推荐
- 深入理解C语言-深入理解指针
关于指针,其是C语言的重点,C语言学的好坏,其实就是指针学的好坏.其实指针并不复杂,学习指针,要正确的理解指针. 指针是一种数据类型 指针也是一种变量,占有内存空间,用来保存内存地址 指针就是告诉编译 ...
- SSDsim
1.官网 http://storage.hust.edu.cn/SSDsim/ 2.博客 http://www.tuicool.com/articles/U77n2i http://blog.sina ...
- java使用validator进行校验
不管是html页面表单提交的对象数据还是和第三方公司进行接口对接,都需要对接收到的数据进行校验(非空.长度.格式等等).如果使用if一个个进行校验(字段非常多),这是让人崩溃的过程.幸好jdk或hib ...
- python3.6下pycharm连接mysql
由于python3.x里面没有了MysqlDB,所以使用python3.6+django连接不上mysql,会报错 no modul "MysqlDB".于是就有了一个替代品,叫p ...
- [转帖]【架构系列】龙芯loongson简介
[架构系列]龙芯loongson简介 https://blog.csdn.net/SoaringLee_fighting/article/details/97759305 2019年07月30日 10 ...
- gRPC 本地服务搭建
RPC RPC 原理 主流 RPC 框架 gRPC 概述 特点 服务端创建 定义服务 生成 gRPC 代码 服务端实现 客户端实现 踩坑记录 源码 RPC RPC 原理 RPC 框架的目标就是让远程服 ...
- SpringBoot2.x集成WebSocket
WebSocket 不做过多得介绍,这里有篇比较全面得文章 Spring Boot系列十六 WebSocket简介和spring boot集成简单消息代理 我这里是精简版,只挑出核心代码记录 ...
- 通过模板创建一个ABP项目
⒈下载 进入ABP模板页面,选择模板后下载 ⒉运行 1.初始化数据库 修改xxxx.Migrator.xxxx.Web.Host appsettings.json中的连接字符串 2.还原数据库 在Nu ...
- union和in哪个效率高
一直都认为是in的效率要高,但是这次确有点蒙圈. SELECT * FROM runinfo WHERE status in (0,2,1,3,4,7,9,10); 这个查询的效率是,经常是1秒多. ...
- 从入门到自闭之Python--MySQL数据库的多表查询
多表查询 连表: 内连接:所有不在条件匹配内的数据们都会被剔除连表 select * from 表名1,表名2 where 条件; select * from 表名1 inner join 表名2 o ...