同一动态路由之间跳转时页面数据不更新的问题

问题描述

Vue 中有时我们会使用到动态路由。具体如下

路由定义如下

js 复制代码
  {
    path: "/children/:id",
    name: "children",
    component: () => import("../views/children.vue")
  }

children 组件中我们可以通过 $route.params.id 获取到对应动态路由的参数,获取到参数后通常会在组件中使用该参数,这时候就可能会出现问题。

当我们在使用时是直接获取 $route.params.id 的值来进行展示,那么就不会出现问题。

html 复制代码
<template>
  <div>
    <p>children 组件的 id 为:{{ $route.params.id }}</p>
  </div>
</template>

但是如果是将 $route.params.id 的值赋值给一个变量,然后使用这个变量去展示的话,就会出现一个问题。

html 复制代码
<template>
  <div>
    <p>children 组件的 id 为:{{ id }}</p>
  </div>
</template>
js 复制代码
 data() {
    return {
      id: this.$route.params.id
    }
  },

那就是在同一动态路由之间进行切换时,由于路由没有发生改变,组件也就不会重新渲染,因此 id 的值也就不会改变,但此时路由参数已经发生改变。

解决方案

  1. 在组件中通过监听器对路由对象进行监听,然后对变量进行重新赋值。
js 复制代码
  data() {
    return {
      id: this.$route.params.id
    }
  },
  // 监听路由对象
  watch: {
    $route(to, from) {
      this.id = to.params.id
    }
  }
  1. 在组件中使用导航守卫 beforeRouteUpdate 来对变量进行重新赋值。
js 复制代码
  data() {
    return {
      id: this.$route.params.id
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.id = to.params.id
    next()
  },
  1. 使用路由传参 props

在定义路由时通过设置 props的值为 true 来开启路由传参

js 复制代码
{
    path: "/children/:id",
    name: "children",
    component: () => import("../views/children.vue"),
    props: true
  },

在组件中可以通过 props 来接收参数

js 复制代码
props: ['id']  // 属性名要与动态参数名一致

这个时候就可以在组件中直接使用

html 复制代码
<template>
  <div>
    <p>children 组件的 id 为:{{ id }}</p>
  </div>
</template>
相关推荐
喜葵4 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_8 分钟前
分片上传-
前端·javascript·状态模式
东北南西12 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱12 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf13 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
代码青铜15 分钟前
【实战指南】Cursor前端+Zion后端:10分钟打造能收款的AI商业应用MVP
前端·人工智能
quan263142 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路43 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript