Vue通过导航栏实现路由跳转

2021-08-22 12:33:18 阅读：172 来源： 互联网

导航栏的具体引用这里不在多说了，具体用法可以参考vue官网

先把可以实现跳转的代码贴上，然后说几个注意点

 <el-menu :default-active="this.$route.path" class="el-menu-vertical-demo left" router>
        <el-menu-item index="/index" >
          <template #title>
            <i class="el-icon-document-copy"></i>
            <span class="m-text">数据汇总</span>
          </template>
        </el-menu-item>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-document-copy"></i>
            <span class="m-text">文章管理</span>
          </template>
          <el-menu-item index="/index/listArticle"  style="padding-left: 5em">
            <i class="el-icon-tickets"></i>
            <span>文章列表</span>
          </el-menu-item>
          <el-menu-item index="/index/addArticle" style="padding-left: 5em" >
            <i class="el-icon-edit-outline"></i>
            <span>添加文章</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <template #title>
            <i class="el-icon-document-copy"></i>
            <span class="m-text">标签管理</span>
          </template>
        </el-menu-item>

      </el-menu>

注意点一：如果想要实现通过导航栏进行路由跳转，需要将element-menu组件的router属性设置为true

注意点二：element-menu-item的属性index中的值是需要跳转的路由的目标地址

注意点三：如果想实现路由跳转之后对应的element-menu-item高亮，需要将default-active属性设置为：this.$route.path

标签：Vue,menu,element,item,跳转,导航,路由
来源： https://www.cnblogs.com/summerHou/p/15171896.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue通过导航栏实现路由跳转