关于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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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常用图片处理类
2016/03/16 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python如何让类支持比较运算
2018/03/20 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
数学检讨书1000字
2014/02/24 职场文书
青奥会口号
2014/06/12 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2014年销售员工作总结
2014/12/01 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
员工福利申请报告
2015/05/15 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
详解Redis主从复制实践
2021/05/19 Redis
带你了解Java中的ForkJoin
2022/04/28 Java/Android