首页 > 其他分享 >左侧菜单改造路由链接

左侧菜单改造路由链接

时间:2022-11-08 09:23:41浏览次数:40  
标签:菜单 实现 路径 router 链接 路由

使用ElementUI实现左侧菜单改造路由链接

Vue的项目中我们会经常用到Element,Iview..等轻量框架来实现页面布局。如果是不是彻底理解这些框架的各个功能和属性的话会带来很多麻烦的。

项目中用到了elementUI的菜单组件,有个展开和折叠功能。这个时候需要实现路由地址的改造链接:就是点击那个子菜单URL里面就会显示那个路由地址

实现方法:我们这里不需要router link 或者router push 来实现,最简单的方法是:ElementUI提高了专门控制路由链接的router属性

在menu标签里添加进去就可以,注意::router=“true”或者 true 也可以。

这一步实现了路由地址的同步跳转,但是这里拿到的是子组件的id路径而不是path路径:

 

这里需要我们自己不全path路径,前面再添加‘/’:

 

成功拿到了userpath路径

 

标签:菜单,实现,路径,router,链接,路由
From: https://www.cnblogs.com/mahmud/p/16868558.html

相关文章

  • 跳转路由地址url写法
    uniapp跳转//页面路径user/pages/addressList/index?id=198213b479b54cbcaf2b5dcd79a92f94//函数代码letid=198213b479b54cbcaf2b5dcd79a92f94;uni.navigateTo({'user/pa......
  • Vue路由实现的底层原理
    在Vue中利用数据劫持defineProperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例、router代表当前Router的实例、router代表当前Router的实例......
  • 服务器请求400(由于被认为是客户端对错误(例如:畸形的请求语法、无效的请求信息帧或者虚
    请求400的原因有很多,常见的为前端数据在调用后端控制器的时候出现的封装错误常为,封装的时候,实体类中的变量名与前端传来的字段名不一致导致的下面是我今天遇到的一个400......
  • day27SPA路由及SASS讲解
    路由前端路由:根据对应路由地址渲染不同的内容前端路由的分类:1.页面路由(刷新):根据地址访问不同的页面(location.href location.assign location.replace)hash路由(不会刷......
  • luffy项目路由分发
    1.总路由路由分发比较简单fromdjango.urlsimportinclude就需要调用include然后在后面加路由地址就ok,前面和普通路由写法一样path('API/V1/home/',include('home.......
  • 日常常用css样式大全,超出隐藏,不换行,省略号,两行超出隐藏,不换行,省略号,CSS中划线(删除
    文字去掉默认抛边line-height:1;超出隐藏,不换行,省略号overflow:hidden;  //超出的文本隐藏text-overflow:ellipsis;  //溢出用省略号显示white-space:nowrap;......
  • ElementUI的左侧菜单栏的小问题~~
    Vue后台管理的项目中使用了ElementUI的组件库。左侧菜单栏遇到了一些小问题,结果一步一步的解决了~~1,首先菜单栏的图标Icon不满足我们的需求,我们可以引入公司内部的样式ic......
  • 静态链接
    前言​ 对于我们平时写代码运行,我们很少去关注编译和链接的过程,因为现在的开发环境都是集成(IDE)的,这些IDE一般都会将编译和链接的过程一步搞定,这一过程又被称为构建。但若......
  • winform对于菜单项禁用的理解
    1usingSystem;2usingSystem.Collections.Generic;3usingSystem.Linq;4usingSystem.Text;5usingSystem.Drawing;6usingSystem.Windows.Forms......
  • JavaScript 学习-50.实现页面菜单拖放(Drag 和 Drop)
    前言拖放是一种常见的操作,即抓取对象以后从一个位置拖到另一个位置。在HTML5中,拖放是标准的一部分,任何元素都能够拖放。拖放(Drag和Drop)在拖曳操作中,被拖曳的元素称做源......