Vue el-menu-item实现路由跳转

news2024/11/20 7:13:31

场景:用了element-ui的el-menu 菜单 怎样实现路由跳转呢?


1,在el-menu加上router,添加el-menu的default-active属性,加:动态绑定,值设置为"this.$router.path" ,


2,将el-menu-item的index设置为路由跳转path,和route.js相对应

 代码:

<el-menu router

        :default-active="this.$router.path"

        class="el-menu-vertical-demo"

        background-color="#545c64"

        text-color="#fff"

        active-text-color="#ffd04b">

        <el-submenu index="1">

          <template slot="title">

            <i class="el-icon-location"></i>

            <span>导航一</span>

          </template>

          <el-menu-item-group>

            <el-menu-item index="/xieyituigai" >协议退改</el-menu-item>

          </el-menu-item-group>

          <el-submenu index="1-4">

            <template slot="title">酒店</template>

            <el-menu-item index="/form">酒店预订</el-menu-item>

          </el-submenu>

        </el-submenu>

        <el-menu-item index="2">

          <i class="el-icon-menu"></i>

          <span slot="title">导航二</span>

        </el-menu-item>

      </el-menu>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408969.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解决跨域Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

web前端-JavaScript中的forEach和map方法

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列总专栏&#xff1a;web前端基础教程 &#x1f451;名言警句&#xff1a…

vue项目,如何关闭eslint检测?多种解决办法

新版本vue项目&#xff0c;如何关闭eslint检测一、问题描述二、问题解决1、首先是比较旧的vue项目2、创建项目的时候&#xff0c;不要选eslint3、如果你使用的编辑软件是webstorm4、创建的项目没有webpack.base.conf.js文件&#xff0c;但是有 .eslintrc.js5、比较新的vue项目&…

vue3获取元素并修改元素样式

&#x1f525;&#x1f525;&#x1f525;欢迎关注csdn前端领域博主: 前端小王hs &#x1f525;&#x1f525;&#x1f525;email: 337674757qq.com &#x1f525;&#x1f525;&#x1f525;前端交流群&#xff1a; 598778642 需求&#xff1a;获取元素的样式并且修改元素样式…

猿创征文|我的前端学习之旅【来自一名大四老学长的真情流露】

猿创征文 | 我的前端学习之旅自我介绍我浑噩的大一大二&#xff08;是不是另一个你&#xff09;我的大三生活大三上&#xff08;学习过程、学习方法、推荐网站&#xff09;大三下&#xff08;技术提升、荣誉证书、推荐比赛&#xff09;我与 CSDN 的机缘&#xff08;从小白到创作…

【微信小程序】视图容器和基本内容组件

开发者可以通过运用组件快速搭建出页面结构&#xff0c;上一章也有对组件进行介绍&#xff0c;那么本文牛牛就来带大家学习小程序的组件。 我们可以将组件理解为微信内嵌的标签&#xff0c;它在小程序承担的作用与HTML的标签一致&#xff0c;不过组件的功能更加多样、具体。 事…

如何在UNI-APP内开发微信公众号(H5)JSSDK

参考文章 UNI-APP 开发微信公众号&#xff08;H5&#xff09;JSSDK 的使用方式 微信内H5使用JSSDK分享&#xff01;&#xff01;&#xff01;注意目前Hbuilderx2.3.7版本存在问题&#xff01;&#xff01;&#xff01; vue-router与location.href的用法区别 微信网页开发 JSSDK…

近四十场面试汇聚成的超全Web服务器面经总结

上期写了简历项目链接简历项目烂大街怎么办&#xff1f;教你最有谱的摆烂&#xff0c;有位读者照做以后&#xff0c;拿下了主管面&#xff0c;在群里宣传以后&#xff0c;最近多了不少小伙伴来催我更新服务器项目相关知识点。 这份总结是我之前秋招的时候&#xff0c;根据每次…

JS的事件介绍

JS的事件介绍 JS&#xff08;JavaScript&#xff09;是基于对象&#xff08;Object-based&#xff09;、事件驱动的脚本语言。 JS事件&#xff0c;就是用户或浏览器本身的某种行为&#xff0c;一般是用户对页面的一些动作引起的&#xff0c;例如&#xff0c;单击某个链接或按…

分享5款实用且免费的软件,让你轻松地完成任务

在日常工作和生活中&#xff0c;使用一些实用的小巧工具软件可以提高效率&#xff0c;让你更轻松地完成任务。 1.图像编辑——Paint.NET Paint.NET是一款免费的图像编辑软件&#xff0c;具有多种高级功能和插件支持。它支持多种文件格式、层、魔术棒、文本、画笔、形状、调整…

【C#+JavaScript+SQL Server】实现Web端在线考试系统 五:考试模块设计(附源码和资源)

需要源码请点赞关注收藏后评论区留言私信~~~ 一、考试模块概述 在线考试系统中的考试模块主要包括阅读考试规则&#xff0c;选择考试科目&#xff0c;随机抽取试题&#xff0c;答题计时器以及自动交卷并评分等功能 在开发考试系统过程中&#xff0c;需要考虑的一点是如何将试…

前端工程化详解——理解与实践前端工程化

前言&#xff1a; 前端工程化一直是一个老生常谈的问题&#xff0c;不管是面试还是我们在公司做基建都会经常提到前端工程化&#xff0c;那么为什么经常会说到前端工程化&#xff0c;并没有听过后端工程化、Java工程化或者Python工程化呢&#xff1f;我们理解的前端工程化是不是…

uniappvideo避坑指南(H5、小程序、app)

今天写下这篇文章已是蓄谋已久了&#xff0c;背景是年初接到项目需求开发基于H5运行的视频学习平台&#xff0c;以及后来uniapp转小程序app开发。相信开发过uniapp的video应该或多或少都遇到过一些坑&#xff0c;开场就不多说了&#xff0c;直接上干货。 项目要求用户不得拖动…

vue3引入router

1.添加vue-router依赖 进入项目路径的cmd下&#xff0c;执行命令 npm install vue-router4 或者yarn add vue-router4 推荐使用yarn命令&#xff0c;比npm安装更快 2.执行npm install重新加载依赖 3.在src文件夹下创建一个router文件夹 4.在router文件夹下创建index.js文件&…

JavaScript核心技术之JSON详解

JSON是什么&#xff1f; JSON&#xff08;JavaScript Object Notation, JS对象简谱&#xff09;是一种轻量级的数据交换格式。它基于 ECMAScript&#xff08;European Computer Manufacturers Association, 欧洲计算机协会制定的js规范&#xff09;的一个子集&#xff0c;采用…

undetected_chromedriver的使用

undetected_chromedriver是专门针对浏览器识别做出来的拓展 直接使用undetected_chromedriver第三方库 if __name__ __main__:from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWaitfrom sel…

前端数据加密的几种方式

1.base64加密方式 1.1 base64是什么&#xff1f; Base64&#xff0c;顾名思义&#xff0c;就是包括小写字母a-z、大写字母A-Z、数字0-9、符号""、"/"一共64个字符的字符集&#xff0c;&#xff08;另加一个“”&#xff0c;实际是65个字符&#xff0c;至…

Access-Control-Allow-Origin跨域解决及详细介绍

首先&#xff0c;跨域不是问题。是一种安全机制。 这是你在开发时、上线前就必须提前考虑到的安全问题并且采取合适的手段去避免这个问题带来的程序错误。不过通常情况下&#xff0c;前端开发的小伙伴们都非常坚信后端小伙伴的接口一定已经处理好了跨域这个需求。然而事实上许多…

JavaWeb 项目 --- 表白墙 和 在线相册

文章目录一. 案例: 表白墙 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 使用数据库存储数据.创建一个类用于数据库连接4. 使用 监视器 来初始化 Thymeleaf5. 编写 Servlet 代码① 重写 doGet 方法② 重写 doPost 方法③ 实现 load 方法④ 实现 save 方法6. 注意事…

Vue中key的作用及原理

1. 先说结论 key在Vue是DOM对象的标识&#xff1b;进行列表展示时&#xff0c;默认key是index&#xff1b;如果数据只做展示使用&#xff0c;使用index作为key是没有任何问题的&#xff1b;如果使用index作为key&#xff0c;而后续操作会破坏顺序&#xff0c;一定会带来效率问…