Question

我想做的是，当您第一次进入包含滑块图像的页面时，它会变得模糊，我通过mount（）中的以下一行来完成该操作，模糊配置是使用{{3}运行的对象}程序包

data(){
   return{
      sliders:{},
      first_slide:'',
      blurConfig: {
           isBlurred: true, // activate and deactivate blur directive example 2
           opacity: 0.2,
           filter: 'blur(1.2px)',
           transition: 'all .3s linear'
       },
    },


 mounted(){
  window.onload = function(){
  setTimeout(function() {
      self.blurConfig.isBlurred = false
     }, 1000 )
   }
 }

但是问题是当我导航到另一条路由时，mount（）中的代码将无法正常工作，因为在vue路由器中，您只会加载一次页面，并且Updated（）也会在页面之前运行。

updated(){
    let self = this;
    setTimeout(function() {
    self.blurConfig0.isBlurred = false
 }, 2000 )

所以我被困在导航到其他路线时以及加载页面时希望图像模糊

Answer 1

尝试此代码。只要您的路线发生变化，路由器上的watch就会呼叫，并且您还需要在mount上呼叫以进行首页加载事件。

watch: {
      $route: function () {
        let self = this;
    setTimeout(function() {
    self.blurConfig.isBlurred = false
 }, 2000 )
      }
    },

Vue＆Vue Route如何在路线开始时使图像模糊？

1 个答案: