1、跳转
方式一：使用 router-link1
2
3
4
5
6<template>
<div>
<div>首页</div>
<router-link to="/about">跳转到 about</router-link>
</div>
</template>
方式二：通过 js 跳转1
2
3
4
5
6
7
8
9<script>
export default {
methods: {
handleRouter () {
this.$router.push('/user/123');
}
}
}
</script>
2、插件
vue-bus.js 定义1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18const install = function (Vue) {
const Bus = new Vue({
methods: {
emit (event, ...args) {
this.$emit(event, ...args);
},
on (event, callback) {
this.$on(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
}
});
Vue.prototype.$bus = Bus;
};
export default install;
main.js 引用1
2import VueBus from './vue-bus';
Vue.use(VueBus);
组件中使用1
2
3
4
5
6// 监听
this.$bus.on('add', this.handleAddRandom);
// 取消监听
this.$bus.off('add', this.handleAddRandom);
// 触发事件
this.$bus.emit('add', num);