52. Vue使用watch监听网页的URL变化
时间:2022-07-23
本文章向大家介绍52. Vue使用watch监听网页的URL变化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
上一篇章使用watch组件通过监听文本框的参数变化,实现了名称拼接的案例。这种业务使用事件监听都可以处理,但是如果需要监听网页的URL地址变化,这样事件监听肯定是做不了的。那么此时就可以使用watch
来实现了。
那么这个实现的思路该怎么处理呢?
这时候可以监听路由的对象this.$route.path
变化来处理。
示例
1.首页编写路由映射登录以及注册两个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>
<style>
.router-link-active,.myactive{
color: #0056B3;
font-weight: 700;
text-decoration: none;
}
/* 设置动画效果 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(9.375rem);
}
.v-enter-active, .v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/login?id=10&name=lisi&age=33" tag="span">登陆</router-link>
<router-link to="/register/10/zhangsan/55">注册</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
// 1. 定义 (路由) 组件。
// 创建登陆组件login
var login = {
template: "<h3>登陆组件, id:{{$route.query.id}}, name:{{$route.query.name}}, age:{{$route.query.age}}</h3>",
created(){
console.log(this.$route);
console.log(this.$route.query.id);
console.log(this.$route.query.name);
console.log(this.$route.query.age);
}
}
// 创建注册组件register
var register = {
template: "<h3>注册组件,id:{{$route.params.id}}, name:{{$route.params.name}}, age:{{$route.params.age}}</h3>",
}
// 2. 定义路由
var routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register/:id/:name/:age', component: register }
]
// 3. 创建 router 实例,然后传 `routes` 配置
var router = new VueRouter({
routes, // (缩写) 相当于 routes: routes
linkActiveClass: "myactive", // 自定义选中的class
})
// 创建vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{},
// 注册局部组件,注意:下面使用vue-router的话,不需要在这里注册组件
components:{},
// 将路由规则对象,注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
router, // 等价于 router: router
})
</script>
</body>
</html>
2.浏览器查看效果
image-20200301202218874
image-20200301202245868
可以看到已经实现了点击组件的切换了,那么下面来监听路由this.$route.path
的变化。
image-20200301202401276
image-20200301202418451
3.使用watch监听$this.route.path
路径变化,根据不同的路由,打印不同的信息
image-20200301204705140
watch: {
// 监听路由变化
"$route.path": function(newVal, oldVal) {
console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
}
}
首先在浏览器查看一下打印的路径信息,如下:
image-20200301204811287
根据上面打印出来的路径,那么我只要做个if
判断可以设置不同的路径打印不同的信息了,如下:
image-20200301205039136
那么在浏览器显示打印的信息如下:
image-20200301205103914
image-20200301205119862
那么从效果来看,已经可以根据不同的路径打印对应的信息内容了。
- [快学Python3]目录与文件操作
- Codeforces Round #411 (Div. 2)(A,B,C,D 四水题)
- [快学Python3]INI文件读写
- [快学Python3]迭代器和生成器
- [快学Python3]模块和包
- 除法取模与逆元/费马小定理
- [快学Python3]类基础
- 邻接矩阵存储有向图(详解)
- [快学Python3]二分查找[策略优化版本]
- 使用 zipfile 解压含有中文文件名的 zip 文件
- qsc oj 22 哗啦啦村的刁难(3)(随机数,神题)
- [快学Python3]数据结构与算法-二分查找
- [快学Python3]数据结构-队列
- 51Nod 1090 3个数和为0(暴力)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法