Vuejs iframe interfering with router

Viewed 966

I have an iframe embedded in my component. When I use

this.$router.go(-1);

To go back to the previous page, it makes the iframe go back to the previous page instead of the current window.

It doesn't go back until it finishes going back on all the pages I visited within the iframe.

How can I make vue return to the previous route/page without including the iframe's navigation?

2 Answers

you can try some like:

//
# main component:
//
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        // ...
    ]
});
Window.vueRouter = router;


//
# iframe component:
//
window.parent.vueRouter.go(-1);

I had a similar problem where changing the content of an iframe pushed state to history. Not adding content the first time around, just when I changed it.

 <iframe :key="activeMedia.id" :src="getYoutubeLink(activeMedia.id)" scrolling="no" frameBorder="0" />

Adding a key forced the element to unmount and mount again and the problem was gone.

Related