【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

迈不过友情╰ 2024-02-29 04:24 20阅读 0赞

**目录**

一、Vue监控路由

1、Vue中watch监控路由

2、Vue中watch监控路由的某一个参数

3、Vue中watch同时监控多个路由

二、刷新当前页面数据

1、location.reload

2、$router.go(0)

3、this.$router.resolve()与this.$router.resolve()

a、this.$router.resolve()

b、this.$router.push()

三、示例场景

四、往期相关优质推荐

--------------------

![a9e52962572d49cc8a1544cc5a3c2727.gif][]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://cn.vuejs.org/guide/introduction.html" title="Vue官网" rel="nofollow">Vue官网</a></strong></td> 
   <td><strong><a href="https://element.eleme.cn/#/zh-CN/component/tooltip" title="Element官网" rel="nofollow">Element官网</a></strong></td> 
  </tr> 
 </tbody> 
</table>

## ![41338c25b6ac4997afbd973cace55c26.png][] ##

## ![75ca27d0c213400c9e7e33de5c705fcf.png][] ##

## 一、Vue监控路由 ##

### 1、Vue中watch监控路由 ###

> 如果你想要监控整个路由对象的变化，包括路由路径、参数、查询参数等的变化，可以使用\`$route\`对象进行监控。以下是一个使用\`watch\`监控整个路由对象的示例：

<template>
      <div>
        
        <div>{
       { monitoredRoute }}</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          monitoredRoute: null, // 用于存储监控的路由信息
        };
      },
      watch: {
        '$route'(newRoute) {
          this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
          // 执行其他操作或调用其他方法
        },
        //或
        $route(newRoute) {
          this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
          // 执行其他操作或调用其他方法
        },
      },
    };
    </script>

在这个示例中，我们在组件的\`data\`选项中定义了一个\`monitoredRoute\`属性，用于存储监控的路由信息。在\`watch\`选项中，使用\`'$route'\`来指定要监控的路由对象。当路由发生变化时，\`watch\`函数会被触发，将新的路由信息保存到组件的\`monitoredRoute\`属性中。

你可以根据需要在\`watch\`函数中执行其他操作或调用其他方法，例如根据路由信息更新组件的状态、重新加载数据等。

请注意，上述示例中的\`monitoredRoute\`是一个示例属性名，你可以根据需要将其替换为你自己定义的属性名。

### 2、Vue中watch监控路由的某一个参数 ###

在Vue中，可以使用\`watch\`选项来监控路由的某一个参数的变化。以下是一个使用\`watch\`监控路由参数的示例：

<template>
      <div>
        
        <div>{
       { monitoredParam }}</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          monitoredParam: null, // 用于存储监控的参数值
        };
      },
      watch: {
        '$route.params.monitoredParam'(newValue) {
          this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
          // 执行其他操作或调用其他方法
        },
      },
    };
    </script>

在这个示例中，我们在组件的\`data\`选项中定义了一个\`monitoredParam\`属性，用于存储监控的参数值。在\`watch\`选项中，使用\`'$route.params.monitoredParam'\`来指定要监控的路由参数。当监控的参数发生变化时，\`watch\`函数会被触发，将新的参数值保存到组件的\`monitoredParam\`属性中。

你可以根据需要在\`watch\`函数中执行其他操作或调用其他方法，例如根据参数值更新组件的状态、重新加载数据等。

请注意，上述示例中的\`monitoredParam\`是一个示例参数名，你需要将其替换为你要监控的实际参数名。另外，如果你还需要监控其他路由参数，可以在\`watch\`选项中添加相应的监控函数。

### 3、Vue中watch同时监控多个路由 ###

<template>
      <div>
        
        <div>{
       { monitoredRoute }}</div>
        
        <div>{
       { monitoredParam }}</div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          monitoredRoute: null, // 用于存储监控的路由信息
          monitoredParam: null, // 用于存储监控的参数值
        };
      },
      watch: {
        '$route'(newRoute) {
          this.monitoredRoute = newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中
          // 执行其他操作或调用其他方法
        },
        '$route.params.monitoredParam'(newValue) {
          this.monitoredParam = newValue; // 将新的参数值保存到组件的monitoredParam属性中
          // 执行其他操作或调用其他方法
        },
      },
    };
    </script>

## 二、刷新当前页面数据 ##

### 1、location.reload ###

在Vue.js中，可以使用\`location.reload()\`方法重新加载当前页面。这个方法会导致浏览器重新发送请求并重新加载页面。

要在Vue组件中使用\`location.reload()\`，可以在需要重新加载页面的地方调用该方法。例如，在一个按钮的点击事件处理程序中：

methods: {
      reloadPage() {
        location.reload();
      }
    }

然后，在模板中使用这个方法：

<button @click="reloadPage">重新加载页面</button>

当用户点击按钮时，页面将会重新加载。

需要注意的是，\`location.reload()\`方法会导致页面完全重新加载，包括重新执行Vue实例的生命周期钩子函数。这可能会导致数据丢失，因为重新加载后，Vue实例将会被重置。

如果你只是想重新加载某个组件或重新获取数据，而不是整个页面，你可以考虑使用Vue的其他方法，如重新发起异步请求或重新设置组件的数据。

### 2、$router.go(0) ###

> 在Vue.js中，可以使用\`$router.go()\`方法进行路由导航。该方法用于在路由之间进行前进或后退操作。\`$router.go()\`方法接受一个整数作为参数，表示前进或后退的步数。正数表示前进，负数表示后退。

下面是\`$router.go()\`方法的使用方法示例：

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td style="width:56px;">序号</td> 
   <td style="width:312px;">代码</td> 
   <td style="width:230px;">释义</td> 
  </tr> 
  <tr> 
   <td style="width:56px;">1</td> 
   <td style="width:312px;">this.$router.go(-1);&nbsp;&nbsp;</td> 
   <td style="width:230px;">// 后退+刷新；</td> 
  </tr> 
  <tr> 
   <td style="width:56px;">2</td> 
   <td style="width:312px;">this.$router.go(0);&nbsp;&nbsp;&nbsp;</td> 
   <td style="width:230px;">// 刷新；</td> 
  </tr> 
  <tr> 
   <td style="width:56px;">3</td> 
   <td style="width:312px;">this.$router.go(1);&nbsp;&nbsp;&nbsp;</td> 
   <td style="width:230px;">// 前进一步</td> 
  </tr> 
  <tr> 
   <td style="width:56px;">4</td> 
   <td style="width:312px;">this.$router.go(2);&nbsp;&nbsp;&nbsp;</td> 
   <td style="width:230px;">// 前进两步</td> 
  </tr> 
  <tr> 
   <td style="width:56px;">5</td> 
   <td style="width:312px;">this.$router.go(n);&nbsp;&nbsp;&nbsp;</td> 
   <td style="width:230px;">// 前进n个页面</td> 
  </tr> 
 </tbody> 
</table>

你可以在Vue组件的方法中使用\`$router.go()\`方法来触发路由导航。例如，在一个按钮的点击事件处理程序中：

methods: {
      goForward() {
        this.$router.go(1);
      },
      goBack() {
        this.$router.go(-1);
      }
    }

然后，在模板中使用这些方法：

当用户点击"前进"按钮时，将向前导航一步。当用户点击"后退"按钮时，将后退一步。

需要注意的是，\`$router.go()\`方法只能在使用Vue Router进行路由管理的应用程序中使用。如果你的应用程序没有配置Vue Router，或者当前路由没有前进或后退的历史记录，\`$router.go()\`方法可能不会产生任何效果。

### 3、this.$router.resolve()与this.$router.resolve() ###

> \`this.$router.resolve()\`和\`this.$router.push()\`是Vue Router中的两个不同的方法，用于处理路由相关的操作，但它们有不同的作用和使用方式。

#### a、this.$router.resolve() ####

*  作用：用于解析路由的相关信息，而不进行实际的导航操作。
 *  使用方式：接受一个路由路径作为参数，并返回一个Promise对象，该Promise对象包含解析后的路由信息。
 *  示例：

const resolvedRoute = this.$router.resolve('/example-route');
    resolvedRoute.then(route => {
       // 处理解析后的路由信息
    });

#### b、this.$router.push() ####

*  作用：用于进行路由导航，将用户导航到指定的路由。
 *  使用方式：接受一个路由路径或一个描述路由的对象作为参数，进行实际的导航操作。
 *  示例：

// 导航到指定路由路径
    this.$router.push('/example-route');
    // 导航到带参数的路由
    this.$router.push({ path: '/example-route', query: { id: 1 } });

使用\`this.$router.resolve()\`方法时，你可以获取解析后的路由信息，但它并不会触发实际的路由导航。而使用\`this.$router.push()\`方法时，会将用户导航到指定的路由路径或描述的路由对象。

因此，如果你只需要获取解析后的路由信息而不进行实际的导航操作，可以使用\`this.$router.resolve()\`方法。如果需要进行实际的路由导航，应该使用\`this.$router.push()\`方法。

## 三、示例场景 ##

> 比如一个页面需要有可能跳转到相同页面, 也可能跳转到不同页面, 为了体验更好, 可以综合情况判断使用那种刷新方式。

//页面类型变化直接
    '$route.query.type'(newValue) {
    	this.$router.push("/xx/yy_detail?type=0&id=" + row.id);
    }
    
    //相同页面相同数据但需要重新渲染(条件结合具体情况)
    '$route.query.xx'(newValue) {
      this.$router.go(0);
    }
    
    //相同页面不同数据
    '$route'(newValue) {
      this.init();
    },
    
    methods: {
        init(){
          this.detail();
          this.$refs["ppData"].flush(this.$route.query.id);
          this.$refs["fileData"].flush(this.$route.query.id);
          this.$refs["child3"].flush(this.$route.query.id);
          this.$refs["child4"].flush(this.$route.query.id);
          this.$refs["child5"].flush(this.$route.query.id);
          this.$refs["child6"].flush(this.$route.query.id);
        },
    },

## 四、往期相关优质推荐 ##

<table> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/124309613" title="VSCode 最全实用插件（VIP典藏版）" rel="nofollow">VSCode 最全实用插件（VIP典藏版）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/103893391" title="Vue超详细整理（VIP典藏版）" rel="nofollow">Vue超详细整理（VIP典藏版）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://blog.csdn.net/libusi001/article/details/127354508" title="Vue中created，mounted，updated详解" rel="nofollow">Vue中created，mounted，updated详解</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/127585267" title="一文快速上手Echarts（持续更新）" rel="nofollow">一文快速上手Echarts（持续更新）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://blog.csdn.net/libusi001/article/details/131668481" title="Vue中el-table数据项扩展各种类型总结（持续更新）" rel="nofollow">Vue中el-table数据项扩展各种类型总结（持续更新）</a></strong></td> 
  </tr> 
 </tbody> 
</table>

![ae09bca3f6334ad9806253e47dd65313.gif][]

**有用请点赞，养成良好习惯！**

**疑问、交流、鼓励请留言！**

[a9e52962572d49cc8a1544cc5a3c2727.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/7ea2664bd449411d872845afcb9cd06f.png
[41338c25b6ac4997afbd973cace55c26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/d68e69301fa34211b2cf71edaa41f9a2.png
[75ca27d0c213400c9e7e33de5c705fcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/f4f7d4d854384b22a7c464ad6d9b8b08.png
[ae09bca3f6334ad9806253e47dd65313.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/29/1c9aee15926e4dec9e52947bd215ae40.png