vue新手：导航栏中的两个链接对应一个页面，不同链接显示的内容不同

原创

于 2019-03-23 16:31:39 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#不同链接跳转到一个页面 #页面显示不同内容

本文介绍如何在Vue应用中实现导航栏的两个链接都跳转至同一页面，但每个链接显示不同的内容。通过bus.js进行通信，以及在路由配置和create页面中设置逻辑，使得不同链接触发相应的内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏sidebar页面：
想要放两个链接，点击任何一个都跳转到create页面，但是create页面显示的内容不同。

<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>&nbsp;&nbsp;&nbsp;<span slot="title">{
  
  { item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{
  
  { subItem.title }}</template>
                                <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {
  
  { threeItem.title }}
                                </el-menu-item>