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

问题描述

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>
相关推荐
IAtlantiscsdn18 小时前
Redis7底层数据结构解析
前端·数据结构·bootstrap
小枫编程18 小时前
Spring Boot 与前端文件上传跨域问题:Multipart、CORS 与网关配置
前端·spring boot·后端
uhakadotcom18 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜18 小时前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍18 小时前
cdn是个啥?
前端
南雨北斗18 小时前
VSCode三个TS扩展工具介绍
前端
若无_18 小时前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin18 小时前
前端发送语音方式总结
前端
给月亮点灯|19 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He19 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown