Vue-Router 路由参数更新,视图不更新

简介: Vue-Router 路由参数更新,视图不更新

一个 parent.vue 页面通过 params 传递不同参数跳转到 update.vue 页,出现了参数更新,发现 update.vue 页面数据没有更新

#####方案一

watch (监测变化) $route 对象, 添加 query 参数

parent.vue

this.$router.push({ path: 'update', query: { 'random': Math.random() } })

update.vue

export default {
  name: 'update',
  watch: {
    '$route' (to, from) {
      // init data
      this.init()
    }
  },
  methods: {
    init () {
      // do something
    }
...

#####方案二

使用  beforeRouteUpdate导航守卫

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Vue Router 官方说明: router.vuejs.org/zh/guide/es…

目录
相关文章
|
3月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
58 3
|
3月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
3月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
954 0
|
3月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
231 1
|
4月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
|
3月前
|
JavaScript 前端开发 UED
|
3月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
3月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
3月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
43 2
|
3月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
36 1

热门文章

最新文章