Eine ausführliche Erläuterung der Übergabe und des Empfangs von Vue-Routing-Sprungparametern

Routensprung

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:&#39;home&#39;}"> 
	 <router-link :to="{path:&#39;/home&#39;}">

（带参数）【相关推荐：vue.js视频教程】

注意：
params传参数 (类似post)
路由配置 path: "/home/:id"
不配置path，路由跳转可请求，刷新页面传递的参数会丢失，
配置path，刷新也买你id会被保留

<router-link :to="{name:&#39;home&#39;, params: {id:1}}">

<router-link :to="{name:&#39;home&#39;, 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后面不会拼接参数 , 但是刷新页面idrrreee

(mit Parametern) [Verwandte Empfehlungen: vue.js-Video-Tutorial] 🎜🎜Hinweis:
paramsÜbergabeparameter (ähnlich wie post)
Routing-Konfiguration 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.
Konfigurieren Sie 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 Aufruf
(ohne Parameter) 🎜rrreee🎜 (query übergibt Parameter) 🎜rrreee🎜html akzeptiert Parameter $route.query.id<br><code>script ruft Parameter abthis.$route.query.id
(params übergibt Parameter)
kann nur verwendet werdenname🎜rrreee🎜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 paramsSeiten-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 verschwindet

Das 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!