VUE 路由参数动态变化,刷新页面动态变化

简介: VUE 路由参数动态变化,刷新页面路由参数动态变化,子组件获取路由参数 场景:响应路由参数变化,当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。

VUE 路由参数动态变化,刷新页面路由参数动态变化,子组件获取路由参数

场景:响应路由参数变化,当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过组件的生命周期钩子不会再被调用。注意:使用 param 传参需要提供路由 name ,使用 query 传参需要提供路由 path 。

路由传参用到了编程式导航

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

复用组件时,对路由参数的变化作出响应,可以简单地 watch (监测变化) $route 对象:
router/index.js

const router = new Router({
  mode: 'history', //去掉router中的#号
  routes: [
    {
      path: '/boss',
      name: 'boss',
      component: home,
      children: [{
        path: 'index',
        component: bossIndex,
        name: 'bossIndex'
      }, {
        path: 'team/:id',
        component: bossTeam,
        name: 'bossTeam'
      }]
    },
    {
      path: '/login',
      component: login,
      name: 'login'
    },
    {
      path: '/404',
      component: NotFound,
      name: '',
      hidden: true
    },
    {
      path: '*',
      redirect: '/404',
      hidden: true
    }
  ]
})

parent.vue

      go: function (e, p) {
        if (e === '/boss/team') {
          this.$router.push({
            name: 'bossTeam',
            params: { id: p }
          })
        } else {
          this.$router.push(e)
        }

      }

child.vue

<template>
  <div class="boss-team">团{{ teamId }}</div>
</template>

<script>
  export default {
    name: "bossTeam",
    data () {
      return {
        teamId: null
      }
    },
    created: function () {
      this.init()
    },
    mounted: function () {

    },
    watch: {
      '$route' (to, from) {
        this.init()
      }
    },
    methods: {
      init () {
        var uid = this.$route.params.id
        this.teamId = uid
        console.log('详情页id = ' + uid)
        console.log(this.$route)
      }
    }
  }
</script>

以上用 param 传参页面动态加载,除了这种方法也可以用 vuex 管理子组件的状态动态改变内容来实现
图一:
1565762057596
图二:
1565761973870

点击参考官方文档

目录
相关文章
|
13天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
120 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
555 0
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
108 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
241 1
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
765 4
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
544 77
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
373 17

热门文章

最新文章