首页 > 其他分享 >vue实现动态导航栏的设置

vue实现动态导航栏的设置

时间:2023-09-12 18:45:05浏览次数:40  
标签:el vue menu 选中 标签 router 动态 导航

1、点击某个导航栏即切换到某个页面

1、为el-menu标签加上router属性

2、在页面中添加router-view标签,动态渲染我们自己选择的router

3、el-menu-item标签的index值即为要跳转的页面地址

呈现效果:

2、为页面设置选中状态--此时点击选中是有状态的,但是初始化的时候,就不会有什么状态

上面的那行redirect: '/one'即锁定初始化界面为PageOne;


但是此时的导航栏没有选中状态;

el-menu-item标签下加上这样一段代码:

即可实现动态选中;

el-menu标签下的这行代码,能够让导航栏呈现打开状态:

:default-openeds="['0','1']"

初始界面的状态下:

标签:el,vue,menu,选中,标签,router,动态,导航
From: https://www.cnblogs.com/liuzijin/p/17697450.html

相关文章

  • 2023-09-12 关于微信小程序在ios端iphone X以上机型的导航栏高度
    完整代码://获取胶囊信息letmenuButtonObject=wx.getMenuButtonBoundingClientRect();uni.getSystemInfo({success:function(res){this.navHeight=res.statusBarHeight+menuButtonObject.height+(menuButtonObject.top-res.statusBarHe......
  • 如何设计一个缓存策略,可以动态缓存热点数据呢?
    如何设计一个缓存策略,可以动态缓存热点数据呢?热点数据动态缓存的策略总体思路:通过数据最新访问时间来做排名,并过滤掉不常访问的数据,只留下经常访问的数据。以电商平台场景中的例子,现在要求只缓存用户经常访问的Top1000的商品。具体细节如下:先通过缓存系统做一个排序队列(比......
  • vue 嵌套全屏iframe 能有效避开返回两次才能返回上一个路由的问题
    <template> <divclass="home">  <iframeref="iframe"class="iframe"frameborder="no"></iframe> </div></template><script>import{ get_doctor_info, statistics, ......
  • vue 学习
    1.给对象动态添加属性和值varobj={   name:"jack",   age:"18"}第一种:Vue.set(obj,'sex','18');第二种:this.$set(this.obj,'score',90);第三种:obj.score=100;直接赋值的方式不能触发Vue的响应式系统。如果我们需要在模板中使用动态添加的属性,建议使用Vue.set......
  • Vue3中使用pinia全局状态管理库
    ❝本期介绍一下pinia在vue3中的简单使用,以及如何使用pinia实现多页面状态共享。❞什么是piniaPinia是一个用于Vue应用程序的轻量级状态管理库。与vuex的区别pinia是vue3的官方状态管理库,vuex是vue2的官方状态管理库pinia更加轻量级pinia能更好的配合Vue3与TSpinia的使用比Vuex简......
  • 打开Chrome浏览器总是跳到其他浏览器导航??? 为你解决!!!
     用chrome浏览器把百度设为默认搜索引擎用起来很方便,但有时百度抽风,会自动跳转到百度首页,无限烦恼,发现了一个快速解决的办法,和大家共享我的解决方法:第一步:打开你桌面上谷歌的属性,打开文件所在位置 第二步:在文件夹所在的位置找到Chrome.exe,双击运行一下,如果如转到其他浏览器......
  • 图标鼠标移入移出动态效果
    效果示例这种效果起初是在腾讯云的官网上发现的,对这个效果比较好奇,所以就看了一下他的实现。然后自己写个demo记录一下。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-sca......
  • docker部署springboot+vue项目环境安装及部署流程
    后端项目打jar包修改及配置项1、修改配置文件application-prod.yml中的mysql配置和redis配置2、切换Maven为生产模式3、Maven打包4、拿到打包后的jar 包5、拿到jar包之后在Linux中使用nohupjava-jarjeecg-system-start-3.5.0.jar>catalina.out2>&1&命令即可启动项......
  • 在fmx下动态生成的TText为什么不能调整大小及字体样式
    //为什么会这样呢?类似于下面这样的代码不能生效。MyLbl:=Ttext.Create(self);MyLbl.Parent:=VscrbMenuBtn;//MyLbl.Font.Size:=20;MyLbl.TextSettings.Font.Size:=20;MyLbl.Size.PlatformDefault:=false;......
  • Ant Design Vue Table 嵌套子表格的数据刷新方法
    父子组件各自负责,在table中嵌套了子表格后,首次加载表格时,父组件会实例化子组件并传递参数,折叠后再次展开时,只会传递参数,子组件的数据刷新就属于子表格了。如@@@code<template#expandedRowRender="{record}"><originIndexs......