A detailed explanation of vue routing jump-parameter passing and receiving

Route jump

1. Declarative route jump

(without parameters)

Jump through the router-link tag, use name or path, in ## The #dom structure will be rendered into a tag Note: If the link in
router-link is '/', it starts from the root route Start, if the start does not contain '/', it starts from the current route.

     <router-link> 
	 <router-link></router-link></router-link>

(with parameters) [Related recommendations:

vue.js video tutorial]

Note:

paramsPass parameters (similar to post) Route configuration
path: "/home/:id" If
path is not configured, route jump can be requested and passed by refreshing the page Parameters will be lost, Configure
path, refresh and buy your ID will be retained

<router-link></router-link>

<router-link></router-link>

Get the parameters passed by the route jump:

html Pass $route.params.id, script via this.$route.params.id

2. Programmatic routing hop Transfer

1. String form

router.push('home')

2. Object form

router.push({ path: 'home' })router.push({ name: 'user'})

3. Call within function

(without parameters)

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

（

queryPass parameters）

this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})

html Get parameters$route.query.id
script Get parametersthis.$route.query.id (
paramspass parameters) Only
name

this.$router.push({name:'home',params: {id:'1'}})

# can be used ##html

Get parameters$route.params.id, script Get parametersthis.$route.params.id

3. The difference between

query and params##query

is similar to

get, After the jump, the page url will be spliced ​​with parameters, similar to ?id=1. Non-important ones can be passed like this. For passwords and the like, use params to refresh the page. The id is still in params

similar to

post. After the jump, the page url will not be spliced ​​with parameters, but the page id# will be refreshed. ## will disappear

The above is the detailed content of A detailed explanation of vue routing jump-parameter passing and receiving. For more information, please follow other related articles on the PHP Chinese website!