Question

我是vue.js的新手

我有一个带有vue.js的laravel应用。当hp正在加载脚本时，也会加载所有元素（猫头鹰轮播，转盘滑块等），但是当我单击其他路线联系人或大约然后回到hp时，滑块或与js相关的其他组件不会加载。

loading

和routes.js import VueRouter from 'vue-router'; import Home from './components/views/Home.vue'; import About from './components/views/About.vue'; import Contact from './components/views/Contact.vue'; let routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact }, { path: '/notes', component: Notes } ]; export default new VueRouter({ routes, linkActiveClass: 'active' });

app.js

是否有一种方法可以在每次更改视图时运行加载轮播等功能？

Answer 1

在安装的触发器上，您可以为每个组件添加自定义js

<script>
    export default {
        mounted () {

        }
    }
</script>

Answer 2

如果有人偶然发现了这一点，但仍在寻找解决方法，这就是我设法做到的方式。将<route-view/>包裹在<transition>中，您可以使用css对其进行控制，并在enter上调用方法以调用所需的函数。每次路线更改时，只要将组件加载到DOM中，就会立即调用该函数

<transition name="slide" v-on:enter="reInitJS">
   <router-view></router-view>
</transition>

<script>
//import the wanted function
import {init} from './main';
export default {
  name: 'App', 
  methods: {
    reInitJS(){
    //call the function
      init(); 
    }
  }
}
</script>

在vue js中更改视图时重新初始化javascript函数

2 个答案: