关于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操纵Cookie实现购物车程序
Feb 15 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
如何在JavaScript中正确处理变量
Dec 25 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递归创建目录的方法
2015/02/02 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python一些性能分析的技巧
2020/08/30 Python
基于python实现复制文件并重命名
2020/09/16 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
文案策划求职信
2014/03/18 职场文书
优秀员工评优方案
2014/06/13 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
房屋出售授权委托书
2014/10/12 职场文书
具结保证书
2015/01/17 职场文书
污水处理保证书
2015/05/09 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python