Vue opens a new window and implements a graphic example of parameter transfer

The function I want to achieve is to open a new window to display a new page, and parameters need to be passed, and the parameters cannot be displayed in the address bar. Moreover, when I refresh the page, the passed parameters cannot be lost and must always exist unless I manually close the new window, that is, the browser tab.

Through programming for Baidu, I found that the online content can't achieve this effect at all, and there are pitfalls. It is obviously impossible to achieve, but they are written as if it is a matter of fact. So I deliberately added "There are pictures and truth" in the title. I am not deceiving you. If you can't achieve the function, don't come out to fool people.

I will first write out the code I have made, and then introduce the pitfalls that others cannot implement, as well as the things that need to be paid attention to in this regard.

Open a new window and pass the code

//Open a new window and pass parameters. The parameters cannot be displayed in the address bar. If the window is not closed, it will be refreshed continuously. The parameters are always valid. handleWindow() {
 //Mainly realize the function of opening a new window var route = this.$router.resolve({
 name: 'Xterm',
 })
 //Mainly implement the function of storing parameters sessionStorage.setItem("ip", "1.1.1.1");
 
 window.open(route.href, '_blank')
}

My routing configuration is also posted.

{
 path: '/xterm',
 hidden: true,
 component: () => import('@/views/monitor/xterm/index'),
 name: 'Xterm',
},

Now the page receives parameters

//Vue initialization method, once the page is initialized, get the parameter created() {
 alert(sessionStorage.getItem("ip"));
 this.ip = sessionStorage.getItem("ip")
},

Post a truth picture

This is done by opening a new window through vue and passing parameters through sessionStorage. Why can only this method be used to achieve this function? Let me tell you about my experience of stepping into the pit. There are bad people among the people who use fake codes to cheat people on the Internet. Which programmer cannot withstand such a test?

First of all, this function requires opening a new window, so there are 3 ways to do it;

The first method: through the <router-link> tag. I personally don’t like the way this tag is written. It’s barely OK for simple business scenarios, but I have to deal with a lot of business and many parameters. This way of writing tags is not conducive to business expansion. Exclude directly, OUT!

The second method: through router.replace method. This method opens the window and replaces the current A page with the B page to jump to. I open the new window to see new things, but it directly makes my previous page disappear. Isn't this fucked up? After my experiment, OUT!

The third method: through the router.resolve method, which is to open a new window without affecting the current A page, and directly open a browser tab. I can switch tabs back and forth to view the information data of the two pages. This is nice, I like it, this is it.

By the way, after vue2.0, in order to keep consistent with the increasingly popular HTML5, router.go and router.push no longer support the attribute of opening a new window. router.go is used as forward and backward; router.push is used as a guide to a special page. This jump will not open a new window, but has a history function. If you have multiple tabs in one window, you can use this to open multiple tabs, as shown in the figure;

Okay, using router.resolve, we can jump to the new window, so now we start passing parameters, and this is where it gets tricky. According to the online transfer, there are mainly two types of parameter transmission:

//Test the first parameter testA (aaa) {
 const route = this.$router.resolve({
   name: 'Xterm', 
   params: {
     ip:aaa
   }
 })
 window.open(route.href,'_blank')
}

//Test the second parameter testA (bbb) {
 const route = this.$router.resolve({
   path: '/xterm', 
   query: {
     ip: bbb
   }
 })
 window.open(route.href,'_blank')
}

The corresponding receiving parameters are as follows;

created() {
 //Test the first access parameter this.ip = this.$route.params.ip
 //Test the second access parameter this.ip = this.$route.query.ip
},

The test result is that the first type can never get the value, while the second type exposes the values ​​of the passed parameters in the address bar. Even if the first method undergoes all kinds of special processing, the best result is only getting the value for the first time. If you refresh the page again, the value will be lost. How can this be possible? Who can guarantee that users won’t feel a bit stuck and click the refresh button? There is no problem at all in passing parameters in router.push . All parameters can be received. The difference is that for the name+params combination, the parameters will not be in the address bar and the data will disappear after refreshing. For the path+query combination, the parameters will be in the address bar and the values ​​will remain there no matter how you refresh the page. I guess after trying it with push, I naturally thought that resolve would be the same. I've seen many blogs saying that they don't pass parameters through the address bar, but use the first method, and then they never succeed, but the number of clicks is still very high, which makes me want to cry but have no tears.

There was no choice but to do it myself. I looked for cache and found localStorage and sessionStorage properties. SessionStorage is used to temporarily save data, which will be deleted after closing the window or tab; localStorage is used to permanently save the data of the entire website. The saved data has no expiration time until it is manually deleted. Obviously, sessionStorage will do.

The browser versions that support these two attributes are as follows;

At this point, the problem has actually been solved. In fact, it is not complicated. It’s just that the answers on the Internet are of varying quality. I’ll record them for others to use.

Summarize

This is the end of this article about Vue opening a new window and passing parameters. For more relevant Vue opening a new window passing parameters content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!