路由 A 中的自定义 component 里，有个定时器，跳转到另个路由里，如何关闭定时器？

发现在 ajax 的 response 里 setTimeout，在 clearTimeout 时，会有其他问题。为了避免问题偏移，去掉ajax，新的示例如下： 参考 wiluxy，在组件的 beforeDestroy 中清除

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script> <div id="app"> <router-link to='/routea'>go to a</router-link> <router-link to='/routeb'>go to b</router-link> <router-view></router-view> </div> <!-- component --> <template id='templateOsd'> <div>component osd</div> </template> <template id="templatea"> <div>route a</div> </template> <template id="templateb"> <div> <div>route b</div> <v-osd></v-osd> </div> </template> <script src="index.js"></script> 

Vue.component('v-osd', { template: '#templateOsd', data: function () { var myData = { refreshTimer: -1, }; var self = this; function refreshOsd() { console.log('refreshOsd in'); self.refreshTimer = setTimeout(refreshOsd, 2000); } refreshOsd(); return myData; }, beforeDestroy: function () { console.log('v-osd beforeDestory'); clearTimeout(this.refreshTimer) }, destroyed: function () { console.log('v-osd destroyed'); } }); // 路由a var compOnenta= { template: '#templatea', data: function () { var data = {}; return data; }, }; // 路由b var compOnentb= { template: '#templateb', data: function () { var data = {}; return data; }, }; var router = new VueRouter({ routes: [{ name: "a", path: "/routea", component: componenta }, { name: "b", path: "/routeb", component: componentb } ] }) var app = new Vue({ router, data: {}, }) app.$mount('#app');