若依vue框架+element ui 组件路由跳转与菜单联动

这篇具有很好参考价值的文章主要介绍了若依vue框架+element ui 组件路由跳转与菜单联动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在后台管理系统中当点击某一按钮时,页面发生跳转(路由发生跳转,跳转到与按钮对应的页面),在跳转的同时在侧边栏中打开与之对应模块的菜单项

1.点击按钮跳转到/pay/PayIndex页面

backgroundcolor: sidetheme === 'theme-dark,vue.js,elementui

2.在后台管理系统中侧边栏使用的是element ui 中的NavMenu导航菜单组件,在后台管理系统 src/layout/components/Sidebar/index中代码如下:

<template>
  <div
    :class="{ 'has-logo': showLogo }"
    :style="{
      backgroundColor:settings.sideTheme === 'theme-dark'? variables.menuBackground : variables.menuLightBackground,}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color=" settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor: variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="settings.theme"
        :collapse-transition="false"
        mode="vertical"
        :default-openeds="openeds"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
      <!-- :index="route.path" -->
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";

export default {
  components: { SidebarItem, Logo },
  data() {
    return {
      openeds: [],
    };
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    },
  },
  //组件路由发生变化,打开与组件对应模块的菜单项
  watch: {
    "$route.path": function (newVal) {
      // 先清空数组,确保数组中只存放一个路由信息
      if (this.openeds.length > 0) {
        this.openeds = [];
      }
      // newVal为路由 /pay/PayIndex 
      let str = newVal.split("/");
      // url为/pay  打开/pay所对应的菜单项
      let url = "/" + str[1];
      this.openeds.push(url);
    },
  },
};
</script>

可通过default-openeds指定想要打开的菜单项(也可设置默认打开的菜单项 如 :default-openeds="[/system/user]") 

backgroundcolor: sidetheme === 'theme-dark,vue.js,elementui

 backgroundcolor: sidetheme === 'theme-dark,vue.js,elementui

 通过监听路由的变化,打开与要跳转的组件页面相对应的菜单项,把变化的路由存放到openeds数组中,实现路由跳转动态的打开与之对应的菜单项

backgroundcolor: sidetheme === 'theme-dark,vue.js,elementui

以上就是实现路由跳转打开对应模块菜单项的所有步骤啦文章来源地址https://www.toymoban.com/news/detail-619581.html

到了这里,关于若依vue框架+element ui 组件路由跳转与菜单联动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依框架登录后跳转其他页面&获取不同的菜单&登录进入后跳转至动态路由的第一个路由

    最近碰到的需求是登录进入后,先跳转至一个自己定义的页面,在这个页面选择一个系统后,进入若依的系统,根据选择的系统获取相应的菜单,进入页面后默认跳转至后端返回的动态路由的第一个路由 1.首先在登录页面login.vue做如下改动 写成你要跳转过去的页面:(这个路由如果是

    2024年02月01日
    浏览(52)
  • vue+element-ui初体验入门拥有自己的前台项目以及配置文件讲解(2)组件式开发,路由,请求发送

    阿丹:         前面的文章已经进行了vue的组件安装,本篇文章来了解一下vue的语句语法以及element-ui的具体用法。并使用全局的守卫路由来完成用户完成登录来请求头携带token 按照图片指引来到main.js将我们前面文章下载的组件进行导入 代码解读: 这是一段 Vue.js 代码片段,

    2024年02月11日
    浏览(47)
  • element ui框架(路由)

    【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】         有过web后端开发经验的同学,相信对路由这个概念应该不陌生。后端开发一般使用的是mvc,其中c,也就是controller,对应的就是各个路由的接口。现在整个前后端开发越来越独立化,两

    2024年02月14日
    浏览(36)
  • element ui框架(路由参数传递)

    【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】         前端开发中,有的时候路由也是需要带参数传递的。不管是窗口登录,还是超链接,一般会带1个或者多个参数。如果是多个参数,通常就用分隔符把它们连接在一起。vue工程下面的参

    2023年04月24日
    浏览(51)
  • 若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据

    多个表格中存在同一字段,并且可通过该字段查到与之对应的数据。举个简单的例子,比如我有一个学生表、一个老师表、一个课程表,假设老师表和学生表里都有课程ID这一字段,那么我可以在课程表里通过课程ID来,查找需要上这门课的学生,以及教这门课的老师,并且在

    2024年01月19日
    浏览(46)
  • vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

    一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中 二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面 三.  页面样式布局 1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示 也可以使用element plus中的Container 布局容器 

    2024年02月13日
    浏览(49)
  • VUE路由跳转并刷新页面(框架层实现)

    前言         网上找了很多办法,都需要开发者在页面内单独实现,或者是刷新整个浏览器,感觉并不是特别舒服。因此,我考虑可以在框架层去实现路由跳转刷新。         思路如下:                 1、重定向至临时界面(用户无感知)                 2、打开临时

    2024年02月11日
    浏览(56)
  • vue3+element plus 中el-menu 怎么实现路由跳转

       

    2024年02月07日
    浏览(49)
  • vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法

    做项目时遇到的这个bug,因为除了跳404之外也没太大影响,之前就一直放着没管,现在项目基本功能实现了,转头处理了一下,现在在这里记录一下解决方法 这个bug的具体情况是:设置了动态路由之后,不同的用户登录之后显示了不同的侧边栏,在侧边栏点击菜单,渲染对应

    2024年04月28日
    浏览(54)
  • 编程式导航、缓存路由组件、路由守卫、Vue UI组件库【VUE】

    作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活 具体编码: 作用:让不展示的路由组件保持挂载,不被销毁 具体编码: 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: (1)activated路由组件被激活时触发 (2)deactivated路由组件失

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包