Vue的一些操作

标签属性赋予变量的值

• 属性值前加一个:**赋的值就为变量的值，实例如下 **input的name属性值为sss

---

<template>
    <input :name="name">
</template>

<script>
    export default{
        data(){
            return{
                name;'sss'
            }
        }
    }
</script>

延时

clearTimeout(this.timer);  *//清除延迟执行* 

this.timer = setTimeout(()=>{
                            this.loading=false
                            },500);

页面刷新

页面刷新

location.reload();

页面跳转传参

//query,用路径跳转

this.$router.push({
    path:'/about',
    query:{
        name:'about',
        code:111
    }
})

#接收参数
this.$route.query

是{name: "about", code: "111"}

页面跳转——window.location.href

window.location.href = 'http://www.baidu.com';

实现后退功能

function backWay() { 
    // history.back();
        history.go(-1); 
        }

局部刷新

在Vue中，我们经常遇到对数据进行增删改查的操作之后, 希望页面显示的是我们操作之后最新的数据, 为了避免重新做axios请求, 此时用到组件的刷新是很方便的了, 以下便是我做项目中总结的组件局部刷新的方法:

• **首先需要修改App.vue **

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>
<script>
export default {
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true
      })
    }
  }
}
</script>

• 到需要刷新的页面进行引用，使用inject导入引用reload，然后直接调用即可

vue离开当前页面时调用的函数（不在methods里）

destroyed: function () {
   console.log("我已经离开了！");
 
this.doSomething();
 },