[Vuejs]-Vue: route navigation with router.resolve (to open a page in new tab) with data in params is lost

by

1👍

The problem you’re seeing stems from the fact that, when you open a new window, Vue is basically going to re-render your components as if you hit refresh. Your Component 2 has props that it can only inherit from another component, and as such, it has no possible way of knowing what the props it needs to use are.

To illustrate in simple terms what’s happening:

The user navigates to Component 1. They click the button, which makes the GET request. You now have some data that you can pass onto Component 2 as props.

In a regular environment, the user would simply click on the link leading to Component 2, and the props would be passed on normally, and everything would work as intended.

The problem in your situation is that Component 2 depends on Component 1 for its data. By navigating directly to the Component 2 route (in this situation, opening a new window is functionally identical to a user copy/pasting the url into the adress bar), Vue never has the chance of interacting with Component 1, and never gets told where to get the props it needs to populate Component 2.

Overcoming the issue

There’s a few things you can do here to overcome this issue. The most obvious one is to simply open Component 2 as you would normally, without opening a new window, but keep in mind that even if you do this, should a user copy/paste the URL where Component 2 is, they’ll run into the exact same issue.

To properly deal with the issue, you have to specify a way for Component 2 to grab the data it needs. Since the data is already fetched, it makes sense to do this in the created() or mounted() hooks, though if you wanted to you could also deal with this in Vue Router’s beforeRouteEnter() hook.

Vuex

While you don’t necessarily need a state management tool like Vuex, it’s probably the simplest way for your needs. When you grab the data from Component 1, store it and access it from the Component 2 mounted() hook. Easy-peasy.

localStorage()

Alternatively, depending on how the data is being served, you could use localStorage(). Since you’re opening a new window, sessionStorage() won’t work. Do note that localStorage() can only hold strings and nothing else, and isn’t necessarily available in every browser.

0👍

You can store the data to a global variable and use that in the newly opened window. Asked here Can I pass a JavaScript variable to another browser window?

Provided the windows are from the same security domain, and you have a reference to the other window, yes.

Javascript’s open() method returns a reference to the window created (or existing window if it reuses an existing one). Each window created in such a way gets a property applied to it "window.opener" pointing to the window which created it.

Either can then use the DOM (security depending) to access properties of the other one, or its documents,frames etc.

Another example from same thread:

var thisIsAnObject = {foo:'bar'};
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;
//or this from the new window
var myVariable = window.opener.thisIsAnObject;

Leave a comment