Heim > Web-Frontend > View.js > Was sind die Vue-Routing-Jump-Methoden?

Was sind die Vue-Routing-Jump-Methoden?

青灯夜游
Freigeben: 2021-10-27 16:20:52
Original
42210 Leute haben es durchsucht

Jump-Methode: 1. Verwenden Sie die Anweisung „“ 3. Verwenden Sie die Anweisung „this.$router.push()“; . $router.replace()“-Anweisung; 4. Verwenden Sie die „this.$router.go(n)“-Anweisung.

Was sind die Vue-Routing-Jump-Methoden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vue Vier Möglichkeiten zum Routensprung (mit Parametern)

1. router-link

1. 不带参数
 
<router-link :to="{name:&#39;home&#39;}"> 
<router-link :to="{path:&#39;/home&#39;}"> //name,path都行, 建议用name  
// 注意:router-link中链接如果是&#39;/&#39;开始就是从根路由开始,如果开始不带&#39;/&#39;,则从当前路由开始。
 
 
 
2.带参数
 
<router-link :to="{name:&#39;home&#39;, params: {id:1}}">  
 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
 
<router-link :to="{name:&#39;home&#39;, query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
Nach dem Login kopieren

2 this.$router.push() (in der Funktion aufgerufen)

1.  不带参数
 
this.$router.push(&#39;/home&#39;)
this.$router.push({name:&#39;home&#39;})
this.$router.push({path:&#39;/home&#39;})
 
 
 
2. query传参 
 
this.$router.push({name:&#39;home&#39;,query: {id:&#39;1&#39;}})
this.$router.push({path:&#39;/home&#39;,query: {id:&#39;1&#39;}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
 
 
3. params传参
 
this.$router.push({name:&#39;home&#39;,params: {id:&#39;1&#39;}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
 
 
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
Nach dem Login kopieren

3. this.$router.replace() (Verwendung ist die gleiche wie oben, push)

4. this.$router.go(n)

this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
Nach dem Login kopieren

ps: Unterschied

  • this.$ router.push
    springt zum angegebenen URL-Pfad und fügt einen Datensatz zum Verlaufsstapel hinzu. Durch Klicken auf „Zurück“ kehren Sie zur vorherigen Seite zurück.

  • this.$router.replace
    springt zum angegebenen URL-Pfad , aber Verlauf Es wird kein Datensatz im Stapel vorhanden sein. Durch Klicken auf „Zurück“ wird zur vorherigen Seite gesprungen (d. h. die aktuelle Seite wird direkt ersetzt)

  • this.$router.go(n)
    Vorwärts oder rückwärts springen n mal Seite, n kann eine positive oder negative Ganzzahl sein

Verwandte Empfehlungen: „vue.js Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die Vue-Routing-Jump-Methoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage