The way of jumping between Vue routes and opening new windows (query, params)

Time:2021-2-9

Inter route hop configuration:

Query mode

The parameters are displayed in the URL

this.$router.push({ 
  //Query mode
  path: "/a",
  query: {
    projectDetails: val
  },

Params mode

The parameter transfer data will not be displayed in the navigation bar. It needs to be used with the name attribute of the route

//Params mode
   name: 'a',
   params: {
      projectDetails: val
   }

New page

You need to use resolve configuration


const {href} = this.$router.resolve({
  path: '/a',
  query: {
   code: '123',
  }
 })
 window.open(href, '_blank')

Here, you need to pay attention to using params to transfer parameters and use it in the new pagethis.$route.paramsThe object is {}. The parameter cannot be passed. Query can pass the parameter normally.

I think this should be the same as we normally open a link, becauseThe tag of router link is a ',It should be a hyperlink.

This is just my personal opinion. Please correct me.

In this case, if you don’t want the parameter to be displayed on the URL and have to transfer it, you can use the browser’s cache to implement it.

Write to the cache on the parent page, read from the cache on the child page, and delete after reading.

summary

The above is the way of Vue routing jump and new window (query, params) introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!
If you think this article is helpful to you, please reprint, please indicate the source, thank you!