Shulou(Shulou.com)06/01 Report--

This article introduces the "vue jump page to open a new window and what is the way to receive parameters" related knowledge, in the actual case of the operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

1. Carry common type parameters

Strings, numbers, etc.

Path: routing link to jump to the new page

Query: parameters to be carried

Let pathInfo = this.$router.resolve ({path:'/product_detail', query: {productId:'11'}}) window.open (pathInfo.href,'_ blank')

The parameters of the new page are received:

This.productId = this.$route.query.productId2, carrying complex type parameters

Objects, arrays, and so on, which are passed through JSON transformations.

Let pathInfo = this.$router.resolve ({path:'/product_detail', query: {data: {name:' Zhang San'}) window.open (pathInfo.href,'_ blank')

The parameters of the new page are received:

Eight ways for console.log (this.$route.query.data) vue pages to jump and transmit parameters

We know that every page in vue needs to be declared in the route by writing the following code in router/index.js:

Import Vue from 'vue'import Router from' vue-router'import Test from ".. / components/Test"; Vue.use (Router) export default new Router ({mode: 'history', routes: [{path:' / tasking, name: 'Test', component: Test, hidden:true},]})

There are several ways to jump to a page and pass parameters:

Method one

You can use tags to jump in template. The path to the jump is http://localhost:8080/t?index=id, as shown below:

Click to jump

You only need to click the button to jump. You don't need to write js code, and if you need to pass parameters, you only need / t?index=1. In this case, the jump page can get the complete url through _ window.location.href, and then intercept the parameters. You can also get the parameters through the following code

This.$route.query.index method 2

The jump path is http://localhost:8080/t?index=id.

Click to jump

It should be noted that the to must be preceded by a colon, and the value of path must be consistent with the value defined by the route above. The parameter is passed using query, and the parameter dictionary is in it.

Receive parameters:

This.$route.query.index method 3

How to name a route:

The jump path is http://localhost:8080/t?index=id.

Click to jump

Note that the name here is also consistent with the name value declared in router/index.js, and params is used to pass parameters, params is paired with name and query is paired with path.

Receive parameters:

This.$route.params.index method 4

The jump path is http://localhost:8080/t/id.

Click to jump

At this time, the routing also needs to be in the following form:

Routes: [{path:'/ t name: 'Test', component: Test, indexation, hidden:true},]

Receive parameters:

This.$route.params.index method 5

The above four methods are all implemented in html, and there is another corresponding method to jump and pass parameters in js. The code is as follows:

Jump to export default {methods: {func () {this.$router.push ({path:'/ tasking indexation 1'});}

Receive parameters are still used

This.$route.query.index method six jumps to export default {methods: {func () {this.$router.push ({path:'/ tweet journal query: {index:'1'}});}

Receive parameters are still used

This.$route.query.index method seven jumps to export default {methods: {func () {this.$router.push ({path:'/ t _ index'});}}

Receive parameters are still used

This.$route.query.index method eight jumps to export default {methods: {func () {this.$router.push ({name: 'Test',params: {index:'1'}});}

Receive parameters are still used

This.$route.params.index "vue jump page opens a new window and how to carry and receive parameters" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.