vue路由跳转,左边的菜单栏不变,右边页面改变

1.需求:左边是菜单,右边的页面根据左边的菜单变化而变化,当一个界面想跳到另一个界面时,左边的菜单不变,但是右边的界面会响应的该改变。关键在于配置path:/management/advertDemandRelease/dataDetail。参数id放在路由上

(1)在vue文件中的代码:

 <el-table-column label="操作" align="left" style="width:40%">
            <template slot-scope="scope">
             
                <router-link :to="`/management/advertDemandRelease/dataDetail/${scope.row.id}`">数据详情</router-link>
              </el-button>
            
            </template>
          </el-table-column>

(2).在路由文件的代码(有路由权限的要配置menus): 

{
            path: '/management/advertDemandRelease/dataDetail/:advertDemandReleaseId',
            component: () =>
                import ('@/views/statistics/dataDetail'),
            hidden: true,
            meta: {
                title: '广告需求数据详情',
                icon: 'documentation',
                noCache: true,
                menus: ['management:advertDemandRelease:shwoDataDetail']
            }
        }

(3).在跳转的文件写接受的参数

  created() {
    const advertDemandReleaseId = this.$route.params.advertDemandReleaseId
    this.advertDemandReleaseId = advertDemandReleaseId
    this.getAdvertOrderData()
  },

猜你喜欢

转载自blog.csdn.net/u011662320/article/details/86613030
今日推荐