关于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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JavaScript中this详解
Sep 01 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
php实现encode64编码类实例
2015/03/24 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
python 循环遍历字典元素的简单方法
2016/09/11 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
银行求职信范文
2014/05/26 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
大学军训口号大全
2015/12/24 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
入党心得体会
2019/06/20 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
python中pycryto实现数据加密
2022/04/29 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS