vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
类别:编程学习 浏览量:460
时间:2021-10-11 00:49:19 vue路由跳转自动定位在哪里
Vue路由this.route.push跳转页面不刷新的解决方案Vue路由this.route.push跳转页面不刷新一、背景
介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。
也就是vue生命周期函数没有执行(created、mounted钩子函数)。
案例:
A页面:
B页面:
问题:
当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行。
二、解决方法:
1、使用activated:{}周期函数代替mounted:{}函数即可。
2、监听路由
// 不推荐、用户体验不好 watch: { '$route' (to, from) { // 路由发生变化页面刷新 this.$router.go(0); } },
// 该方法会多一次请求 watch: { '$route' (to, from) { // 在mounted函数执行的方法,放到该处 this.qBankId = globalVariable.questionBankId; this.qBankName = globalVariable.questionBankTitle; this.searchCharpter(); } },
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失
this.$router.push({path:"",query:{id:""}})
path和query搭配,刷新页面参数不会消失,query中参数成了url中的一部分
以上为个人经验,希望能给大家一个参考,也希望大家多多支持开心学习网。
您可能感兴趣
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue统计代码行数(vue实现计数器简单制作)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vue代码统计(Vue实现计数器案例)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9