目前我了解到的思路应该是路由带参数跳转,但是不知道如何设置,搜索了很久没有解决,小白求教。
下拉菜单和 折叠面板 不在同一页。
下拉菜单代码:
<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 类似,谢谢!
你可以参考这个网址看下如何获取参数,并使用的 https://www.jianshu.com/p/5dff306fdb0f
是想要通过菜单跳转到面板页面,然后通过路由带的参数来判断展开哪个面板吗
回复 cheeseC, 是的,折叠面板是手风琴,希望的效果是,通过点击菜单的哪项,对应的折叠面板就展开哪项。
下拉菜单和 折叠面板 不在同一页,点击下拉菜单通过路由跳转到面板页,然后展开的是对应点击的那项。
1.点击菜单实现路由跳转带参数
2.在跳转进入的页面里面mounted里获取参数,并赋值给你面板展开用绑定的值
3.你的面板展开设置需要绑定值,这个值可以是你路由获取到的进行判断
大概思路就是 通过路由参数,来判断你要展开那个面板
好的,收到,我按照这个方法来写。