Routing-Parameter für Vue.js

Dieses Mal bringe ich Ihnen die Routing-Parameter von Vue.js. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Routing-Parameter von Vue.js? ein Blick.

Funktion: Routing-Parameter für die Seite übergeben.

Konfigurieren Sie die Parameter, die in der Routing-Map-Tabelle übergeben werden müssen:
Zum Beispiel: Auf der Apple-Seite I Sie müssen einen Farbparameter übergeben. Sie können Parameter im Pfad festlegen, beginnend mit:

path: '/apple/:color',

. Verwenden Sie insbesondere:

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple/:color',      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

Wenn ich auf die Seite springe, verbinde ich die Parameter direkt nach der Adresse, unten rot. Das heißt, der übergebene Farbparameter

http://localhost:8080/apple/red

wird verwendet, um die von der Seite im Skript-Tag übergebenen Parameter abzurufen, und wird über das globale -Objekt davon.$route.params

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am componnet apple&#39;
      }
    },    methods: {
      getParams () {        console.log(this.$route.params)
      }
    }
  }</script>

Das obige Druckergebnis ist:

{color: "red"}

Verwenden Sie die übergebenen Parameter Über die Schnittstelle im Template-Tag können Sie $route.params.color

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div></template>

Mehrere Parameter übergeben

Die Einstellungen in der Route sind wie folgt:

path: '/apple/:color/detail/:type',

Die URL der übergebenen Parameter:

http://localhost:8080/apple/red/detail/3

Alle übergebenen Parameter drucken:

{color: "red", type: "3"}

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte die

anderen verwandten Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue-Tag-Attribute und bedingtes Rendering von Vue.js

Listen-Rendering v von Vue.js -für Array-Objekt-Unterkomponente

Das obige ist der detaillierte Inhalt vonRouting-Parameter für Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!