<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="height:2000px">
<div id="app">
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
var componentA = {
template: `<div>hello world</div>`,
methods: {
change: function() {
console.log( "componentA" );
}
},
created: function() {
var _this = this;
window.addEventListener( "scroll", function() {
_this.change();
}, false );
}
};
var componentB = {
template: `<div>hello life</div>`,
methods: {
change: function() {
console.log( "componentB" );
}
},
created: function() {
var _this = this;
window.addEventListener( "scroll", function() {
_this.change();
}, false );
}
};
var vm = new Vue( {
el: "-sharpapp",
router: new VueRouter( {
routes: [
{ path: "/a", component: componentA },
{ path: "/b", component: componentB }
]
} )
} );
</script>
</body>
</html>
recently encountered a problem similar to the above example, which is a simple example of simulating a single page switch, but you will find that during the switching process, with the mouse scrolling, the methods of both local components will be triggered. How to solve this situation? To reach the corresponding page, only the method of the corresponding component is triggered. Please take a look at the passing god. Thank you