weixin_51854763 2021-01-20 16:34 采纳率: 100%
浏览 295
已采纳

请问下拉菜单如何通过 vue路由跳转到 collapse 折叠面板的某一页?

目前我了解到的思路应该是路由带参数跳转,但是不知道如何设置,搜索了很久没有解决,小白求教。
下拉菜单和 折叠面板 不在同一页。

下拉菜单代码:

<div class="dropdown_index">
        <el-row class="block-col-2">
            <el-col :span="12">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        <i class="el-icon-circle-plus-outline"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><router-link to="/index">1</router-link></el-dropdown-item>
                        <el-dropdown-item><router-link to="{path:'/collapse', params: {name:01}}">2</router-link></el-dropdown-item>
                        <el-dropdown-item><router-link to="">3</router-link></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </div> 

collapse 代码:

<el-collapse accordion router :default-active="$router.path">
		<el-collapse-item name="01">
				<template slot="title">
				<i class="el-icon-menu"></i> 1
				</template>
				<div>与现实生活一致:</div>
				<div>在界面中一致</div>
		</el-collapse-item>
		<el-collapse-item title="2" name="02">
				<div>控制反馈:通过</div>
				<div>页面反馈:操作</div>
		</el-collapse-item>
		<el-collapse-item title="3" name="03">
				<div>简化流程:</div>
				<div>清晰明确:</div>
				<div>帮助用户识别:</div>
		</el-collapse-item>
</el-collapse>

路由代码:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect: '/index',
    children: [
      {
        path: '/index',
        name: 'Index',
        component: Index
      },
      {
        path: '/collapse:name',
        name: 'collapse',
        component: () => import('../page/collapse.vue')
      },
    ]
  }
]

希望达到的效果是,点击菜单的 1 能跳转到 折叠面板的 1,另外 2 3 类似,谢谢!  

 

  • 写回答

7条回答 默认 最新

  • cheeseCui 2021-01-20 17:58
    关注

    你可以参考这个网址看下如何获取参数,并使用的 https://www.jianshu.com/p/5dff306fdb0f

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

悬赏问题

  • ¥15 MapReduce结果输出到HBase,一直连接不上MySQL
  • ¥15 扩散模型sd.webui使用时报错“Nonetype”
  • ¥15 stm32流水灯+呼吸灯+外部中断按键
  • ¥15 将二维数组,按照假设的规定,如0/1/0 == "4",把对应列位置写成一个字符并打印输出该字符
  • ¥15 NX MCD仿真与博途通讯不了啥情况
  • ¥15 win11家庭中文版安装docker遇到Hyper-V启用失败解决办法整理
  • ¥15 gradio的web端页面格式不对的问题
  • ¥15 求大家看看Nonce如何配置
  • ¥15 Matlab怎么求解含参的二重积分?
  • ¥15 苹果手机突然连不上wifi了?