设置elementui中导航的激活项跟随子路由页面进行切换

最新推荐文章于 2023-12-07 15:11:28 发布
最新推荐文章于 2023-12-07 15:11:28 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： vue 文章标签： vue 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43142423/article/details/105170688
版权

之前我通过vuex设置一个公共变量，然后让跳转子路由页面时候修改公共变量，折腾半天依旧没用。后来发现使用$route.path轻松解决。方法如下：

router
:default-active="$route.path"
class="el-menu-demo"

只用在:default-active：填入$route.path就行了

国骐
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
在Vue.js应用中，我们经常需要...总结起来，本文详细阐述了在Vue中隐藏某些路由页面的导航栏以及保持路由刷新后菜单项激活状态的方法。理解并掌握这些技巧，有助于我们更好地构建具有动态导航和局部刷新功能的Vue应用。
vue路由设置：父路切换子路由 active样式消失
u014288878的博客
08-17 610
这里的优惠券详情是在优惠券页面跳转进入的页面，我们需要给不显示在菜单栏的页面设置一个选中的路径，注意要带上父路径属性path，这里的父路径是第二行的/Productmanagement和第十二行的coupon。这里/Productmanagement/coupon等同於coupon,两种写法都可以，优惠券详情的path也可以写成path: 'coupon/WorkFormEdit/:couponid/:memberid'。在你的代码中，你将它用于标识一个菜单项的标题，以便在侧边栏菜单中设置选中效果。
Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项
raphero
05-16 1万+
Element-ui中的导航菜单el-menu自动激活当前路由对应的菜单项 el-men有一个坑，就是当前激活的菜单项，刷新页面后，激活项就会消失。 研究半天终于找到解决办法： 原来default-active的值不一定是数字，也可以是路由path、name，只要是字符串能对应上就能正确激活，所以这里做以下改动： 目前网上搜索到的很多都是router.path，目前新版vue−router应该是已经改成了router.path，目前新版vue-router应该是已经改成了router.path，目前新
element菜单组件样式修改NavMenu导航菜单
见贤思齐焉，见不贤内自省
06-06 4194
element菜单组件样式修改NavMenu导航菜单
vue项目：使用ElementUI中的el-menu导航栏实现路由跳转，页面切换
weixin_52950296的博客
06-09 1万+
vue+elementUI 简单菜单跳转
el-menu页面内控制激活的菜单$router.path :default-active
热门推荐
qlin_11的博客
08-09 2万+
需求是在页面内点击跳转，但是菜单项依然是激活状态，我这里实现的方法是做了子路由，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由，注意子路由需要使用split来分割出第一个/后的一级路由，使用这个取出来的来赋给：default-active,这里因为是通过请求从后台获取的菜单路由，赋给index来实现动态加载不同的菜单项，所以会有el-menu的index可能...
Vue页面手动刷新,实现导航栏激活项还原到初始状态
10-14
接着，在组件的`created()`生命周期钩子中，我们执行一个函数`fetchData()`，这个函数会根据当前的路由路径更新`defaultActiveIndex`的值，确保与当前页面对应的导航项被正确激活。 ```javascript created() { ...
Vue路由切换页面不更新问题解决方案
10-15
这个问题通常出现在使用vue-router进行页面路由切换时，尤其是当路由切换所涉及的组件相同时。这种情况下，Vue不会重新创建组件实例，而是复用已有的组件，从而导致数据无法更新，用户界面没有反映预期的变化。 ...
vue+Vue Router多级侧导航切换路由(页面)的实现代码
10-17
本文将详细讲解如何利用Vue和Vue Router实现一个多级侧导航栏，这种导航栏通常用于在SPA中快速切换不同层级的页面。 首先，我们需要明确什么是多级侧导航。多级侧导航是一种导航结构，它可以包含多个层级，类似于...
AngularJS ui-router刷新子页面路由的方法
10-18
在AngularJS应用中，刷新子页面路由是一个常见的需求，尤其是在数据变更或用户交互后需要更新页面内容时。本文将详细探讨AngularJS ui-router刷新子页面路由的方法，帮助开发者解决这一需求。 首先，$state是ui-...
elementui 选中子页面时，保持左侧导航中父级的激活状态 :default-active=“activeMenu“
NOyesNONO_的博客
07-05 2000
去配置子路由的页面，给meta加上这个属性即可
el-menu的属性:default-active
m0_47630333的博客
07-06 4371
说明内容是：当前激活菜单的index 其实，即使不加这个属性，也能正常显示选中的item变量，但是之所以要加这个属性，是为了浏览器刷新后，仍然可以定位到之前选中的路由 如果没有多层嵌套路由的话，可以令:default-active="$route.path"，但是如果有多层嵌套，建议在计算属性里，更新数据 ...
vue3 element-plus 将路由和激活菜单绑定
最新发布
weixin_45288172的博客
12-07 899
vue3 element-plus 将路由和激活菜单绑定
使用Element UI导航菜单默认展开子菜单
qq_51196135的博客
12-27 7334
⚠️这里 index的属性值由中定义，将想要展开的菜单目录的index值写在数组openeds即可。2、openeds 是默认展开菜单的 的index属性的值的集合，是一个数组。4、index最终值（onlyOneChild.path）实现效果：登陆项目即自定义展开菜单均展开显示！1.需要给 添加属性。
Element-Ui 表格展开的图标改为自定义图标
Amtion的博客
07-16 5718
Element-Ui 表格展开的图标改为自定义图标 官方： 实现效果： 可以换成自己需要的图片或者文字
vue+elementui实现侧边导航，select菜单激活回调函数实现路由跳转
weixin_46371752的博客
02-21 5090
1、系统页面布局采用的是elementui布局 <el-container> <el-aside width="200px"> <el-menu @select="menuClick"> <!-- select是菜单激活回调--> <el-submenu index="1">
vue + elementUi 导航组件，在进入子路由时怎样保持导航的激活状态
Sensation_cyq的博客
08-19 1053
使用Element实现路由子页面的切换跳转
SunFlower914的博客
11-06 8592
如何通过路由实现子页面跳转？ vue中this.$router.push和this.$route.path的区别？ 如何解决在页面内点击展示的是B页面，刷新后菜单项A依然是激活状态的问题？路由子页面的path路径上加/与不加/有什么区别？如何修改element导航栏的样式？
vue3.0中如何进行路由页面导航，通俗一点的讲法
07-11
在Vue 3.0中，你可以使用Vue Router来进行页面导航。Vue Router是Vue官方提供的路由管理工具，它能够帮助你在Vue应用中实现页面的切换和导航。 下面是一个通俗的讲法来进行Vue 3.0中的路由页面导航： 1. 首先，你需要安装Vue Router。你可以通过npm或者yarn来安装它。在你的项目根目录下运行以下命令安装Vue Router： ```shell npm install vue-router ``` 2. 安装完成后，在你的Vue应用中导入Vue Router，并创建一个路由实例。 ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) ``` 在这个例子中，我们创建了一个路由实例，并定义了两个路由规则。当访问根路径 `/` 时，会渲染 `Home` 组件；当访问 `/about` 路径时，会渲染 `About` 组件。 3. 在你的Vue应用中，使用 `<router-view>` 组件来显示当前路由对应的组件。 ```html <router-view></router-view> ``` 4. 最后，将路由实例挂载到Vue应用中。 ```javascript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.use(router) app.mount('#app') ``` 在这个例子中，我们使用 `app.use(router)` 来安装路由实例到Vue应用中。 现在，你就可以通过改变URL或者通过编程导航（例如点击一个按钮）来切换页面了。Vue Router会自动根据URL的变化来匹配对应的路由规则，并渲染相应的组件。 希望这个通俗的讲法能够帮助你理解在Vue 3.0中如何进行路由页面导航！如果你还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值