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

最新推荐文章于 2024-09-06 15:00:38 发布

无悔_一叶扁舟

最新推荐文章于 2024-09-06 15:00:38 发布

阅读量2.6w

点赞数 2

分类专栏： vue 文章标签：路由跳转

本文链接：https://blog.csdn.net/u011662320/article/details/86613030

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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()
  },