如何从其他页面的按钮跳转到该折叠项

要在其他页面通过按钮点击跳转到指定的`<el-collapse-item>`，首先你需要在目标页面定义路由规则。假设你的项目使用Vue Router，步骤如下：

1. **设置路由**:
- 在`main.js`或相应的路由配置文件中，添加一个新的路由条目，例如：

     {
       path: '/your-path/:item', // 指定URL模式，`:item`是动态参数
       component: (resolve) => import(/* webpackChunkName: "your-component-name" */ '@/components/FoldPage.vue'),
       props: true, // 允许传递props
     }

- 确保`FoldPage.vue`组件接收并处理这个`item`参数。

2. **折叠页面组件（FoldPage.vue）**:
- 在` FoldPage.vue`里，获取`item`参数并在模板上绑定，比如：

     <template>
       <el-collapse v-model="activeName">
         <el-collapse-item :key="item.name" :name="item.name" :title="item.title">
           <div>... 内容 ...</div>
         </el-collapse-item>
       </el-collapse>
     </template>

     <script>
     export default {
       data() {
         return {
           activeName: '',
           items: [
             {
               name: '1',
               title: 'TFBSs prediction & Multiple motifs finding'
             }, /* 添加更多的项 */
           ]
         };
       },
       props: {
         item: {
           type: Object,
           required: true
         }
       },
       computed: {
         ...mapState(['activeName']), // 如果需要，可以映射状态
       },
       mounted() {
         this.activeName = this.item.name; // 设置默认激活项
       },
     };
     </script>

3. **触发跳转**:
- 在其他页面（如`OtherPage.vue`），找到按钮，添加`@click`事件，并传入`item`作为参数，指向路由：

     <button @click="goToFoldPage(item)">跳转到折叠项</button>

     methods: {
       goToFoldPage(item) {
         this.$router.push(`/your-path/${item.name}`);
       },
     }

现在，当你在`OtherPage.vue`点击按钮时，就会跳转到`FoldPage.vue`的对应折叠项。