Vue--Router--解决watch监听路由无效的问题

曾经终败给现在 2023-09-28 19:38 75阅读 0赞

原文网址：[Vue--Router--解决watch监听路由无效的问题\_IT利刃出鞘的博客-CSDN博客][Vue--Router--_watch_IT_-CSDN]

## 简介 ##

**说明**

本文用实例介绍如何解决watch监听路由无效的问题。

**需求**

有两个组件：CompA和CompB，它们对应的path分别是：/compA、/compB。CompA组件引入CompB组件，并通过router-link跳转到B组件。想在CompA和CompB两个组件中打印出路由跳转的日志。

## 问题复现 ##

#### 代码 ####

**路由（router/index.js）**

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import CompA from '../components/CompA'
    import CompB from '../components/CompB'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/compA',
        name: 'CompA',
        component: CompA
      },
      {
        path: '/compB',
        name: 'CompB',
        component: CompB
      }
    
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

**A组件**

<template>
      <div class="outer">
        <div>
          这是CompA
        </div>
        <router-link :to="{name:'CompB'}">跳转到CompB</router-link>
      </div>
    </template>
    
    <script>
    export default {
      name: 'CompA',
      watch: {
        $route: {
          handler (to, from) {
            console.log('组件：' + this.$options.name)
            console.log('来自：' + from.name)
            console.log('去往：' + to.name)
          }
        }
        // 也可以这么写：
        // $route (to, from) {
        //   console.log('组件：' + this.$options.name)
        //   console.log('来自：' + from.name)
        //   console.log('去往：' + to.name)
        // }
      }
    
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**B组件**

<template>
      <div class="outer">
        这是CompB
      </div>
    </template>
    
    <script>
    export default {
      name: 'CompB',
      watch: {
        $route: {
          handler (to, from) {
            console.log('组件：' + this.$options.name)
            console.log('来自：' + from.name)
            console.log('去往：' + to.name)
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

#### 测试 ####

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

![79efd84ff7184f81ae6e350517c08328.gif][]

可以发现：没有打印任何路由变化的日志！

## 解决方案 ##

### 方案1：immediate: true ###

watch的属性：immediate: true //一旦监听到路由的变化立即执行

#### 代码 ####

只修改watch部分，改为：

watch: {
        $route: {
          handler (to, from) {
            console.log('组件：' + this.$options.name)
            console.log('来自：' + from)
            console.log('去往：' + to.name)
          },
          immediate: true
        }
      }

#### 测试 ####

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

![242330ee78214f16bb796854a2d3ae2e.gif][]

可以发现：子路由之间的跳转只能获得目的路由，无法获得来源路由。

### 方案2：路由包含子路由 ###

#### 代码 ####

**路由设置（router/index.js）**

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Parent from '../components/Parent'
    import CompA from '../components/CompA'
    import CompB from '../components/CompB'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Parent',
        component: Parent,
        children: [
          {
            path: 'compA',
            name: 'CompA',
            component: CompA
          },
          {
            path: 'compB',
            name: 'CompB',
            component: CompB
          }
        ]
      }
    
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

**父组件（components/Parent.vue）**

<template>
      <div class="outer">
        <div>
          这是CompA
        </div>
        <router-link :to="{name:'CompB'}">跳转到CompB</router-link>
      </div>
    </template>
    
    <script>
    export default {
      name: 'CompA',
      watch: {
        $route: {
          handler (to, from) {
            console.log('组件：' + this.$options.name)
            console.log('来自：' + from.name)
            console.log('去往：' + to.name)
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**子组件（components/CompA.vue）**

<template>
      <div class="outer">
        <div>
          这是CompA
        </div>
        <router-link :to="{name:'CompB'}">跳转到CompB</router-link>
      </div>
    </template>
    
    <script>
    export default {
      name: 'CompA',
      watch: {
        $route: {
          handler (to, from) {
            console.log('组件：' + this.$options.name)
            console.log('来自：' + from.name)
            console.log('去往：' + to.name)
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**子组件（components/CompB.vue）**

#### 测试 ####

**测试1：CompA跳转CompB**

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

![82d8cc629a9c4e1ba6bb93f73fc875f9.gif][]

可以发现：子路由之间的跳转可以获得来源路由和目的路由。

**测试2：Parent跳转CompA，CompA跳转CompB**

访问：[http://localhost:8080/\#/][http_localhost_8080]

![8d375eb62dd34dcbaf046d473c4ab7d3.gif][]

可以发现：父=> 子、子=> 子、子=> 父，这三个之间的跳转可以获得来源路由和目的路由。

[Vue--Router--_watch_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126275930
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[79efd84ff7184f81ae6e350517c08328.gif]: https://img-blog.csdnimg.cn/79efd84ff7184f81ae6e350517c08328.gif
[242330ee78214f16bb796854a2d3ae2e.gif]: https://img-blog.csdnimg.cn/242330ee78214f16bb796854a2d3ae2e.gif
[82d8cc629a9c4e1ba6bb93f73fc875f9.gif]: https://img-blog.csdnimg.cn/82d8cc629a9c4e1ba6bb93f73fc875f9.gif
[http_localhost_8080]: http://localhost:8080/#/
[8d375eb62dd34dcbaf046d473c4ab7d3.gif]: https://img-blog.csdnimg.cn/8d375eb62dd34dcbaf046d473c4ab7d3.gif