| 在`router.beforeEach`中,可以使用`next(false)`来阻止路由的切换,从而等待父页面消息传递后再将导航转到目标路由。具体步骤如下: |
复制
- 在
router.beforeEach
中调用 next(false)
来暂停路由的切换。
- 在父页面中传递消息,并在接收到消息时使用
router.push
手动触发路由切换。
示例代码如下:
| |
| import Vue from 'vue' |
| import Router from 'vue-router' |
| |
| Vue.use(Router) |
| |
| const router = new Router({ |
| routes: [ |
| |
| ] |
| }) |
| |
| router.beforeEach((to, from, next) => { |
| if (to.meta.needMessage) { |
| next(false) |
| } else { |
| next() |
| } |
| }) |
| |
| export default router |
复制
| |
| export default { |
| methods: { |
| sendMessage() { |
| this.$router.push({ name: 'Child', params: { message: 'Hello World' } }) |
| } |
| } |
| } |
复制
| |
| export default { |
| created() { |
| if (this.$route.params.message) { |
| |
| } else { |
| |
| } |
| } |
| } |
复制
通过以上方法,可以在router.beforeEach
中等待父页面传递消息后再进行路由的切换。