Vue & Vue Route 如何在路由开始时使图像模糊？答案

【问题标题】：Vue & Vue Route how to make an image blur when the route begin?Vue & Vue Route 如何在路由开始时使图像模糊？
【发布时间】：2019-09-18 10:16:33
【问题描述】：

我想要做的是，当您第一次转到包含滑块图像的页面时，它会模糊，我使用 mount() 中的以下行来完成，模糊配置是一个使用 v-blur 包运行的对象

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 )
   }
 }

但问题是当我导航到不同的路由时，mounted() 中的代码将不起作用，因为在 vue 路由器中，您只加载一次页面，并且 Updated() 将在它之前运行。

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

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

【问题讨论】：

标签： vue.js vuex vue-router blur

【解决方案1】：

试试这个代码。每当您的路由更改时，watch on router 都会调用，并且您还需要调用 mount 以进行首页加载事件。

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

【讨论】：

在我的组件中观看
它在我的组件中不起作用，即使 Console.log 任何东西都不起作用
它在我的工作。您需要将其添加到实际路线服务的主页中。观看：{ $route: function () { let self = this; setTimeout(function () { console.log("hi") }, 2000) } },