el-menu实现路由跳转及当前页的导航

1、el-menu-item 路由跳转

要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下index即可实现点击el-menu-item实现路由跳转。

<el-menu :router="true><el-menu-item index="/home">首页<el-menu-item>
<el-menu>

这样还是不够的，刷新页面后， el-menu-item 展示项不是当前页。

2、el-menu-item 展示当前页的导航

导航当前项，在el-menu标签中绑定 :default-active=”$route.path”,注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

<el-menu
:router="true
:default-active="$route.path"
><el-menu-item index="/home">首页<el-menu-item>
<el-menu>

刷新页面，el-menu-item展示的还是当前当前项，就是正常的了

el-menu实现路由跳转及当前页的导航相关推荐

react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能(导航守卫) 背景方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例自定义Prompt组件的提示弹窗方法2:通过 ...
Vue3 路由跳转如何刷新当前页重新请求数据
Vue3 中路由跳转至当前页然后刷新页面,vue3重新跳转当前页面因为数据请求和路由跳转是异步的只需要加入 async 和await 即可
Vue el-menu高亮设置及点击菜单项实现路由跳转
el-menu相关知识记录一.el-menu菜单项高亮设置二.点击菜单项实现路由跳转 2021/11/13 知识点记录一.el-menu菜单项高亮设置 el-menu高亮是通过:default- ...
vue路由跳转权限_vue权限路由实现方式总结
使用全局路由守卫实现前端定义好路由,并且在路由上标记相应的权限信息 const routerMap = [ { path: '/permission', component: Layout, re ...
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
数据更新渲染,axios请求数据,配置环境一.路由跳转 app.vue <template><div id="app"><keep-alive> ...
React 小案例路由跳转
在上篇的基础上做路由跳转:上篇安装路由及代码: 安装:cnpm i -S react-router-dom 1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js,route ...
vue路由跳转不执行mounted方法
问题:列表页面,进入详情,使用route跳转传值,进入详情.首次进入执行mounted方法,二次进入不执行mounted方法. 排查:1.确定列表路由跳转id传入变化 2.锁定是生命周期的问题解决方 ...
路由跳转时的页面状态保存
前言我们在开发网页时,经常会遇到一种情况--在一个页面对页面初始状态进行了修改(如已请求到的数据.表单数据.滚动高度等等),跳转到另外一个页面之后再返回到原页面(路由回退),原页面需要保持原先的状态 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...

el-menu实现路由跳转及当前页的导航

1、el-menu-item 路由跳转

2、el-menu-item 展示当前页的导航

el-menu实现路由跳转及当前页的导航相关推荐

最新文章

热门文章