52. Vue使用watch监听网页的URL变化

需求

上一篇章使用watch组件通过监听文本框的参数变化，实现了名称拼接的案例。这种业务使用事件监听都可以处理，但是如果需要监听网页的URL地址变化，这样事件监听肯定是做不了的。那么此时就可以使用watch来实现了。

那么这个实现的思路该怎么处理呢？

这时候可以监听路由的对象this.$route.path变化来处理。

示例

1.首页编写路由映射登录以及注册两个组件

代码语言：javascript复制

<!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

代码语言：javascript复制

                watch: {
                    // 监听路由变化
                    "$route.path": function(newVal, oldVal) {
                        console.log(`new_path = ${newVal}, old_path = ${oldVal}`);
                    }
                }

首先在浏览器查看一下打印的路径信息，如下：