Home >Web Front-end >Vue.js >A detailed explanation of vue routing jump-parameter passing and receiving
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 :to="{name:'home'}"> <router-link :to="{path:'/home'}">(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 :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">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 formrouter.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 parameters
this.$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
query and params
##query
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
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!