Heim >Web-Frontend >View.js >Eine ausführliche Erläuterung der Übergabe und des Empfangs von Vue-Routing-Sprungparametern
1. Deklarativer Routensprung
(ohne Parameter)
Springen Sie durch das Tag router-link
, verwenden Sie name
oder path
können verwendet werden. Es wird in ein a
-Tag in der dom
-Struktur gerendert
Hinweis: router-link
ist „/
“, er beginnt bei der Root-Route. Wenn er nicht mit „/
“ beginnt, beginnt er bei aktuelle Route. router-link
标签进行跳转,使用name
或者path
都可以,在dom
结构中会被渲染成a
标签
注意:router-link
中链接如果是’/
‘开始就是从根路由开始,如果开始不带’/
’,则从当前路由开始。
<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}">
(带参数)【相关推荐:vue.js视频教程】
注意:params
传参数 (类似post
)
路由配置 path: "/home/:id"
不配置path
,路由跳转可请求,刷新页面传递的参数会丢失,
配置path
,刷新也买你id会被保留
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
获取路由跳转传递的参数:html
通过 $route.params.id
, script
通过this.$route.params.id
2.编程式路由跳转
1.字符串形式
router.push('home')
2.对象形式
router.push({ path: 'home' })router.push({ name: 'user'})
3.函数内调用
(不带参数)
this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})
(query
传参)
this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})
html
取参 $route.query.id
script
取参 this.$route.query.id
(params
传参)
只可以使用name
this.$router.push({name:'home',params: {id:'1'}})
html
取参$route.params.id
, script
取参this.$route.params.id
3.query
和params
的区别
query
类似 get
, 跳转之后页面 url
后面会拼接参数,类似?id=1
, 非重要性的可以这样传, 密码之类还是用params
刷新页面id还在
params
类似 post
, 跳转之后页面 url
后面不会拼接参数 , 但是刷新页面id
rrreee
params
Übergabeparameter (ähnlich wie post
)Pfad: „/home/:id“ code ><br> Wenn <code>path
nicht konfiguriert ist, können Routensprünge angefordert werden und die übergebenen Parameter gehen beim Aktualisieren der Seite verloren. path
, und Refresh kauft auch Ihre ID. 🎜rrreeerrreee🎜 Holen Sie sich die vom Routensprung übergebenen Parameter: html
über $route.params.id
, script über this.$route.params.id🎜🎜🎜2. Programmatischer Routensprung🎜🎜🎜1. Funktionsinterner Aufrufquery
übergibt Parameter) 🎜rrreee🎜html
akzeptiert Parameter $route.query.id<br><code>script
ruft Parameter abthis.$route.query.id
params
übergibt Parameter)html
nimmt den Parameter $route.params.id
, script
an Nimmt den Parameter this.$ route.params.id
🎜🎜🎜3 an. Der Unterschied zwischen query
und params
🎜🎜🎜query
ähnelt get
. Nach dem Sprung wird die Seite url
mit Parametern gespleißt, ähnlich wie ?id=1
, unwichtige können so übergeben werden, Passwörter und dergleichen verwenden weiterhin params
Seiten-ID aktualisieren ist immer noch da🎜🎜params
ähnelt post. Nach dem Sprung werden die Parameter nach <code>url
nicht zusammengefügt, aber die Seite id
verschwindetDas obige ist der detaillierte Inhalt vonEine ausführliche Erläuterung der Übergabe und des Empfangs von Vue-Routing-Sprungparametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!