关于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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
页面使用密码保护代码
Apr 10 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
js友好的时间返回函数
Aug 24 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
写出高质量的PHP程序
2012/02/04 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
基于Python实现文件大小输出
2016/01/11 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Python根据服务获取端口号的方法
2019/09/25 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
《桃花心木》教学反思
2014/02/17 职场文书
品质标语大全
2014/06/21 职场文书
春游踏青活动方案
2014/08/14 职场文书
python绘制箱型图
2021/04/27 Python
Python爬虫基础讲解之请求
2021/05/13 Python