关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题


Posted in Javascript onJanuary 16, 2020

首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用

关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题

诸如以上所示,该问题,百度了好久,多亏群里大佬。

vue使用less报错的解决方法 安装less less-loader

cnpm install less less-loader --save-dev

app.vue是所有XXX.vue文件的根文件

所以webapp,的底部通常是在这里配置

h5的新增
<header>标题</header>
<main>主题内容</main>
<footer>固定的底部内容</footer>
所以底部通常不使用footer

元素在最底部水平排列

<div class="myfooterbox">
<div>外卖</div>
<div>搜索</div>
<div>订单</div>
<div>我的</div>
</div>

.myfooterbox {
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
}

ps==>如果元素的宽度是自身的宽度。
justify-content: space-between;可能是是没有效果的。

点击路由跳转

this.$router.push({ path: "/search" });

给当前点击的元素添加背景色 同样是借助三目运算 如果是true 添加某一个类

.on {
background: pink;
}

<div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜索</div>

路由跳转

<div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜所 </div>

methods: {
handlersell() {
this.$router.push({ path: "/" });
},
handlersearch() {
this.$router.push({ path: "/search" });
},
}

优化后 使用了replace

<div @click="handlergo('/')" :class="{ on: '/' === $route.path }">外卖</div>
<div @click="handlergo('/search')" :class="{ on: '/search' === $route.path }" >搜索</div>

handlergo(path) {
this.$router.replace(path);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Angular 向组件传递模板的两种方法
Feb 23 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
js实现二级联动简单实例
Jan 11 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
JS实现可视化音频效果的实例代码
Jan 16 #Javascript
js实现div色块碰撞
Jan 16 #Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 #Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
PHP xpath()函数讲解
2019/02/11 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
材料化学应届生求职信
2013/10/09 职场文书
活动邀请函范文
2014/01/19 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
责任书格式
2015/01/29 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js