vue在App.vue文件中监听路由变化刷新页面操作

在路由跳转时，会出现页面需要重新刷新一遍才能获取数据加载页面，这时添加一个监听器，如果跳转到页面刷新一次。

export default {
 name: 'App',
 provide(){
 return{
  reload:this.reload
 }
 },
 data(){
 return {
  isRouterAlive:true,
 }
 },
 //监听器
 watch: {
 // 方法1
 '$route' (to, from) { //监听路由是否变化
  // console.log(999)
  if(to.path == "/"){ //跳转到哪个页面
  location.reload()
  }
 },
 },
 methods:{
 reload(){
  this.isRouterAlive = false;
  this.$nextTick(function () {
  this.isRouterAlive = true
  });
 },
 },
}

补充知识：vue监听路由的改变和监听页面的刷新与离开

要分清两者的区别。

首先是监听页面的刷新与离开，此时相当于直接在这个网页中按了刷新，如果是webapp则是离开这个app而不是切换路由！

如果是用js的特性监测，则是不仅可以页面的刷新与离开，还能切换路由。注意当keepalive时即使切换了路由也无效。

在script中直接增加监听器监视beforeunload：

    //监视如果页面离开
    created() {
      window.addEventListener('beforeunload', this.updateHandler)
    },
    beforeDestroy() {
      this.finalItemDetail(); // 自己要进行的操作
    },
    destroyed() {
      window.removeEventListener('beforeunload', this.updateHandler)
    },

然后methods中添加finalItemDetail和updateHandler方法：

      updateHandler() {
        this.finalItemDetail()
      },
      finalItemDetail() {
        console.log('刷新或关闭');
      },

如果想监听某个特定的页面的离开，比如我现在在/index下，现在去了/index/001下面，就可以在watch中监听路由的变化，前提是实用vue-router。

如果是简单的判断路由变化可以用注释掉的，直接执行clear方法（自己定义在methods中）

但是注意这个只能监听自己子路由的变化！

    watch: {
      // 如果路由有变化，会再次执行clear方法
      // "$route": "clear",
      $route(to , from){
        console.log( to.path, from.path );
        this.clear(to.path);
      }
    },

然后我还额外做了个判断：

      clear(path) {
        if(path!="/item/item01/evaluate")
          console.log("从这个页面离开了");
        this. active=0;
      },

以上这篇vue在App.vue文件中监听路由变化刷新页面操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue深度监听(监听对象和数组的改变)与立即执行监听实例

    1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同

  • 详解Vue中watch对象内属性的方法

    vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内

  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

  • vue 监听 Treeselect 选择项的改变操作

    项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值. 我使用了watch 来监听 treeselect 绑定的 model ,如果 model 的值发生变化就触发 currDeptChange 事件. <el-form-item prop="deptId" :label="$t('deviceManage.device.table.deptId')+':'"> <treeselec

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • vue中监听路由参数的变化及方法

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

  • vue监听路由变化的几种方式小结

    目录 监听路由变化的几种方式小结 一.监听路由从哪儿来到哪儿去 二.监听路由变化获取新老路由信息 三.监听路由变化触发方法 四.全局监听路由 如何在组件中监听路由参数的变化? 方式一: 监听 $route 方式二:通过组件内的导航守卫 监听路由变化的几种方式小结 vue页面开发中,我们经常需要根据路由的变化去实现一些操作,那么如何监听路由的变化呢?当然是利用VUE中的watch,请看代码. 一.监听路由从哪儿来到哪儿去 watch:{     $route(to,from){       con

  • vue 监听窗口变化对页面部分元素重新渲染操作

    问题 在处理页面重新渲染时通常的做法是: 用vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 使用 v-if 重新渲染部分组件或容器 需要重新渲染的内容 <div v-if="render"> ... </div> vue 监听窗口大小发生改变 使用 window.addEventListener() 添加 resize 事件监听窗口变化

  • vue监听路由变化时watch方法会执行多次的原因及解决

    目录 需求描述: 需求解析: 解决需求 问题解决 本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励.近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决.在这里记录一下我自己的解决的过程,这也是第一次在掘金发言,求轻虐. 需求描述: 有A.B两个页面,需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询,然后显示在B页面 需求解析: 如果是你,你拿到这个需求,应该很容易想到在B页面对路由变化做watch,然后获取参数执行查询数据的方法完事. 解

  • 详解JavaScript实现监听路由变化

    目录 history pushState()方法 pushState()使用场景 replaceState() 方法 popstate事件 pushState和replaceState如何监听呢? 获取当前状态 对比 总结 前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能 通过hash改变,利用window.onhashchange 监听. 通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器

  • 使用watch监听路由变化和watch监听对象的实例

    一.watch监听路由变化 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二.watch监听对象 例子: <el-select v-model="form.region" placeho

随机推荐