首页 > 其他 > 详细

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

时间:2021-08-22 14:16:56      阅读:10      评论:0      收藏:0      [点我收藏+]

导航栏的具体引用这里不在多说了,具体用法可以参考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通过导航栏实现路由跳转

原文:https://www.cnblogs.com/summerHou/p/15171896.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!