本文主要是介绍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. 定义 (路由) 组件。// 创建登陆组件loginvar 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);}}// 创建注册组件registervar 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: routeslinkActiveClass: "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
那么从效果来看，已经可以根据不同的路径打印对应的信息内容了。
更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：
image
image
这篇关于52. Vue使用watch监听网页的URL变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
