关于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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
微信小程序排坑指南详解
May 23 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php 判断数组是几维数组
2013/03/20 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
大队委员竞选稿
2015/11/20 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
ubuntu下常用apt命令介绍
2022/06/05 Servers