Vue刷新重载当前路由获取数据

32次阅读

共计 489 个字符,预计需要花费 2 分钟才能阅读完成。

  1. Vue 如何刷新或重载以后路由来更新数据?
  2. Vue 如何监听同一路由加载事件?

计划:能够利用路由的 quey 参数,应用 watch 进行检测 router 的变动实现监听。上面是一个实际示例

vue 刷新数据当然简略,间接调用合数据的办法就行。
然而,往往业务需要的不同,实现流程或思路也会不同。上面有一个业务需要场景

  • 头部下拉列出仓库,
  • 切换仓库,左侧的菜单不变,都是一样的,
  • 切换仓库时都会定位到【告诉】界面上。告诉界面的路由是: /notice
  • 切换后,告诉要加载对应的仓库数据

计划 1:利用路由的 quey 参数,应用 watch 进行检测 router 的变动实现监听
切换仓库时,对路由进行传参

watch: {
  // 利用 watch 办法检测路由变动:'$route': function (to, from) {
    // 能够拿到指标参数 to.query.id 去再次申请数据接口
     if(to.query.id){
         // 加载表格数据
         this.getList(to.query.id);
     }
  }
 },

计划 2:应用 store 计划
应用 computed 计算,切换仓库时 commit store,告诉列表界面获取 store 的流数据,进行申请。

正文完
 0