热门频道
首页
博客
研修院
VIP
APP
问答
下载
社区
推荐频道
活动
招聘
专题
打开CSDN APP
Copyright © 1999-2020, CSDN.NET, All Rights Reserved
elementui刷新页面
打开APP
elementUI-解决刷新页面路由地址和页面不跟随变化的问题 原创
2022-08-17 17:37:17
2点赞
super码力
码龄1年
关注
在页面未刷新之前，每个导航都可以点击跳转到对应的页面并且跳转路径一致，但是一旦刷新，当前高亮的导航选项和页面以及跳转路径就不一样了。
问题展示：
🌹第一种解决方式
打开elementUI官网可以看到有一个select事件，如下图：
首先可以在代码中绑定一个事件函数，在函数方法中传入index参数，并且使用localStorage存储index，接着在生命周期函数created中把index赋值
代码如下：
<template>
<div>
<!-- 导航 -->
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
@select="selectMenu"
>
<el-menu-item index="/">首页 </el-menu-item>
<el-menu-item index="/about">关于 </el-menu-item>
<el-menu-item index="/personal">个人中心 </el-menu-item>
</el-menu>
<!-- 出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "DianshangLayout",
data() {
return {
activeIndex: "/",
};
},
methods: {
//1、定义函数，绑定到@select
selectMenu(index, path) {
console.log(index, path);
//存储index的值
localStorage.setItem("index", index);
},
},
created() {
//生命周期获取index并赋值
let index = localStorage.getItem("index");
if (index) {
this.activeIndex = index;
}
},
};
</script>
解决之后效果如下：
🌹第二种解决方式
直接在el-menu给default-active绑定$route.path就可以快速实现 :default-active="$route.path"
代码如下：
<template>
<div>
<!-- 导航 -->
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
>
<el-menu-item index="/">首页 </el-menu-item>
<el-menu-item index="/about">关于 </el-menu-item>
<el-menu-item index="/personal">个人中心 </el-menu-item>
</el-menu>
<!-- 出口 -->
<router-view></router-view>
</div>
</template>
关注展开
打开CSDN，阅读体验更佳
VUE + element-ui刷新当前页面_小仙女de成长的博客
需要使用的页面中调用如下export default { inject:['reload'], data() { } }this.reload()直接调用即可 小仙女de成长 关注 0 5 0 专栏目录 vue-element-admin局部刷新页面 a125129167的博客 5993 在写业务需求的时候遇到...
Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积...
今天做了一个小小的功能,就是基于elementUi框架的一个输入框,需要监听输入框的回车事件,然后调取接口。 代码如下: <el-form:model="ruleForm"label-width="100px"><el-form-item label="物料编码"><el-input v-model="ruleForm...
使用element-ui的el-menu刷新保持选中状态
使用element-ui的el-menu刷新保持选中状态
继续访问
elementui el-tab页面切换如何自动刷新当前页面？
问题描述： 当tab页面第一次切换时会自动刷新页面，但当第二次再切换到该页面是不自动刷新，如何让每次切换都刷新问题。 解决方法： 去掉keep-alive。子组件修改监听事件。 keep-alive：主要用于保留组件状态或避免重新渲染。 父组件原代码（无法实现切换自动刷新）： <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <el-tab-pane
继续访问
element实现当前页面/表格刷新方法_来干了这碗代码的博客_elem...
VUE + element-ui实现当前页面/表格刷新方法 之前在做elementui的项目,一些新增,编辑,删除等操作后,需要刷新当前页面或者表格,看官方文档没找到合适的方法,之前是直接重新再调一遍后台接口进行数据的刷新,今天发现一个不错的方法,来记录一...
vue2.0+ElementUI 实现tabs切换刷新页面_柘月十七的博客_elem...
vue2.0+ElementUI 实现tabs切换刷新页面 前端博客不写页面效果都是耍流氓!在下面这样的一个简单页面,需要实现从用户列表跳转到黑名单页面,然后再跳回用户列表,要实现对用户列表刷新这样一个需求。总的来说,就是两个页面相互切换要实现...
【elementui+vue】使用导航时设置:default-active=“$route.path“无效的问题
【elementui+vue】使用导航时设置:default-active="$route.path"无效的问题
继续访问
Vue-Elementui 实现局部网页刷新
Vue-Elementui 实现局部网页刷新 方法一：使用2.2.0 新增的provide / inject控制的显示隐藏 在App.vue中使用provide //App.vue <template> <div> <router-view v-if="isRouterAlive"></router-view> <...
继续访问
elementUI 输入框回车刷新页面__let的博客_elementui...
elementUI 输入框回车刷新页面 如何出现? 当el-form 表单内只有一个 el-input 输入框时,在输入框内回车就会触发表单的提交事件。 <el-form :model="formData"> <el-form-item label="服务名称" :rules="[ { required: true, ...
vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由
两种方式 <el-menu :default-active="$route.path"></el-menu> 2.（1）、设置属性 :default-active=“activeIndex” （2）、watch方法检测路由变化 （3）、created生命周期设置路由 <template> <div style="position: relative"> <el-menu router mode="horiz
继续访问
vue+elementui 如何刷新整个界面
在这里当我们上传图片再对图片进行回显的时候，当前这个vue文件还是可以得到这个图片的地址从而进行回显的，而当我们一个界面是由两个vue构成的呢？那么另一个vue该怎么进行重新加载呢？ 第一种方法：对整个界面进行刷新。 ...
继续访问
Vue+ElementUI实现点击按钮刷新页面
js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()vue中ElementUI刷新页面代码。
继续访问
vue+element ui新增和修改之后刷新页面
一.在App.vue中 <template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template> <script> export default { provide(){ return{ reload:this.reload, } }, data(){ return{
继续访问
element 导航菜单，嵌套路由初始化时，页面导航菜单选中，但是页面内容不变的解决办法。
问题描述： <template> <div class="detail-middle"> <el-menu router default-active="/pointDetail/:id/firePointMap" class="el-menu- demo" mode="horizontal">
继续访问
vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
继续访问
最新发布 Vue-elementui-admin 快捷标签导航栏解决切换路由不刷新问题
首先找到 @/layout/components/AppMain.vue 然后移除 keep-alive。如上，问题解决了，按文档来说，直接使用keep-alive也是有弊端的，但是问题不大，好歹解决问题了。
继续访问
使用element-ui表单，点击回车查询时，页面重新刷新加载的问题
使用element-ui表单，点击回车查询时，页面重新刷新加载的问题 代码： <el-form :model="queryParams" ref="queryForm" label-width="68px"> <el-form-item label="展示名称" prop="showName"> <el-input v-model="queryParams.showName"
继续访问
Vue中路由刷新后设置默认跳转页面（redirect）重定向
Vue中路由刷新后设置默认跳转页面（redirect）重定项
继续访问
vue使用element-ui，页面刷新，导航栏跳转问题（解决）
产生的原因 原因是在使用组件时，设置了默认选中，因此页面刷新，导航发生了变化，而路由及页面并未改变 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 解决办法 第一步，同样还是要使用默认选中 :default-active="leftNavActive"...
继续访问
热门推荐 VUE + element-ui实现当前页面/表格刷新方法
之前在做elementui的项目，一些新增，编辑，删除等操作后，需要刷新当前页面或者表格，看官方文档没找到合适的方法，之前是直接重新再调一遍后台接口进行数据的刷新，今天发现一个不错的方法，来记录一下 App.vue中配置入下 <template> <div id="app"> <router-view v-if="isRouterAlive">&l...
继续访问
vue+element 路由跳转方式和常见问题
@[TOC]记录开发中常见的问题 跳转路由的几种方式 1、声明式： 1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link> 2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查
继续访问
elementUI嵌套路由的导航栏在刷新页面的时候选中状态消失的解决
嵌套路由在router.js里面设置meta路由元信息解决方法 { path: '/home', component: Home, redirect: '/sys', children: [ { path: '/sys', component: Sys ,meta:'/sys'}, { path: '/app', component: App, redirect:'/
继续访问
element-ui form 表单按回车后整个页面刷新
element-ui form 表单按回车后整个页面刷新 <el-form :model="form" ref="ruleFormRef" size="default" label-width="70px"> <el-row :gutter="20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-form-item label=
继续访问
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
ElementUI NavMenu导航菜单,跳转到包含子路由的路由时，导航菜单项不高亮显示
继续访问
ElementUI导航栏根据路由改变状态
最近在用Vue开发前端时遇到了一个问题，就是ElementUI控件库中的ElMenu控件(用于导航)无法随着路由（请求地址）的变化而改变高亮的条目。查阅官方文档得知ElMenu有一个default-active属性。该属性代表ElMenu被创建后，处于高亮状态的条目的索引值。于是我便将default-active属性与route的path属性绑定在了一起。实现代码如下： <el-menu :default-active="$route.path" :router="true"> <
继续访问
elementui刷新页面
前端
写评论
评论
收藏
2
踩
分享
打开CSDN APP阅读体验更佳×