So übergeben Sie einen Wert im VueJS-Framework-Routing

Vuejs-Framework-Routing-Wertübertragungsmethode: 1. Rufen Sie direkt die Anweisung „$router.push(...)“ auf, um Parameter zum Übertragen des Werts zu übertragen. 2. Verwenden Sie Axios, um den Wert zu übertragen. Sie können „this“ aufrufen .$axios. get(...)“-Anweisung zur Übergabe des Werts.

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

Fassen Sie die Routenwertübertragung in Vue zusammen, die die Verwendung von Axios beinhaltet

Bei Verwendung von

Methode 1

Komponentenübertragungswert

Entsprechende Routing-Konfiguration:

{
	 path: '/detail/:id',
	 name: 'Detail',
	 component: Detail
}

Hinweis: Seien Sie leicht zu verwechseln Stellen Sie sicher, dass Sie /:id nach der Route hinzufügen. Die ID ist nur ein Parametername, es spielt keine Rolle, aber sie muss beim Übergeben und Empfangen mit dem Parameternamen übereinstimmen/:id，id 只是一个参数名，无所谓，但是需要与传递和接收时的参数名保持一致

直接调用$router.push实现携带参数跳转

this.$router.push({ path:`/detail/${id}` })

注：在跳转传参时，path后面是用两个反引号包起来的，而不是双引号或者单引号，并且是使用${}的形式把所需要的参数传过去

在子组件中进行接收

this.$route.params.id

注：是route，而不是router

---

如果使用路由属性中的name来确定匹配的路由进行传参的话，需要这样：

对应路由的配置：

{
    path: '/detail',
    name: 'Detail',
    component: Detail
}

携带参数跳转：

this.$router.push({
  name: 'Detail',
  params: {
	id: id
  }
})

注：这里不能使用/:id来传递参数了，因为父组件中，已经使用params来携带参数了。

子组件中接收参数：

this.$route.params.id

再次强调，是route，不是router

用params传参，用name属性对应跳转路径，类似于post提交，参数不会出现在跳转路径里。

---

axios传值

当我们需要把前端的数据带到后端接口时
也可以用这种方式进行传值

例如：

前端中调用后端接口的代码：

this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)

在后端中进行接收：

router.get('/find/:id',(req,res)=>{
	//接收let id = req.params.id
})

注意是get请求

这样的请求方式是会在地址栏中显示的
地址栏链接示例：http://127.0.0.1:3000/api/user/find/10

方式二

组件传值

对应的路由配置：

{
	 path: '/detail',
	 name: 'Detail',
	 component: Detail
}

携带参数跳转：

this.$router.push({
	path:'/detail',
	query:{
		id:id
	}
})

注：这里使用的是query

然后在子组件中进行接收：

this.$route.query.id

注：传递时参数名一定要保持一致，接收时，不要用params了，要使用query进行接收

用query传参，用path属性对应跳转路径，类似于get提交，参数是在路径里显示的。

axios传值

如果要在axios中使用的话，可以这样：

例如：

前端调用后端接口代码：

this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)

其实这样是和上面再写一个query是一样的，不过这样更加简便

注：是用两个反引号包起来，后面使用的是 ? 号，而不是 /

使用这种方式的话，可以一次性在地址栏中传递多个值，中间用 & 符进行连接，是get请求

因为浏览器的地址栏有长度限制，所以如果参数过多时，不建议用这种方式

在后端中进行接收：

router.get('/delete'(req,res)=>{
let name = req.query.name;
let age = req.query.age;
})

注：这里不要在/delete后面加东西了，接收的时候用query的方式进行接收

使用这样的方式进行传值，也是会在地址栏中显示的
地址栏链接示例：http://127.0.0.1:3000/api/user/delete?name=zhangsan&age=10

特别提醒

• 如果用params进行传参，一定要用name属性来对应跳转路径
• 如果用query进行传参，一定要用path属性来对应跳转路径

方式三

这里只说 axios传值

axios传值

当我们调用后端接口要在数据库中插入数据的时候（添加数据），可以这样使用：

前端调用后端接口：

this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})

等号后面的name和age是你从表单里得到的数据，然后保存到了data里面，然后从data里面拿出来

在后端进行接收：

router.post('/add',(req,res)=>{
let name = req.body.name;
let age = req.body.age;
})

注：这里接收时用body进行接收，是post

Rufen Sie $router.push realisiert das Springen mit Parametern🎜rrreee🎜🎜Hinweis: Beim Springen zur Übergabe von Parametern folgen auf path zwei Backticks anstelle von doppelten Anführungszeichen Oder einfache Anführungszeichen und verwenden Sie die Form von ${}, um die erforderlichen Parameter zu übergeben🎜🎜🎜Empfangen Sie es in der Unterkomponente🎜rrreee🎜🎜Hinweis: Es ist route anstelle von router code>🎜🎜<hr>🎜Wenn Sie den <code>name im Routing-Attribut verwenden, um die passende Route für die Übergabe von Parametern zu ermitteln, müssen Sie Folgendes tun: 🎜🎜Die entsprechende Routenkonfiguration: 🎜rrreee🎜 Mit Parametern springen: 🎜rrreee🎜🎜 Hinweis: /:id kann hier nicht zum Übergeben von Parametern verwendet werden, da params in der übergeordneten Komponente verwendet wurde. Parameter werden übertragen. 🎜🎜🎜In der Unterkomponente empfangene Parameter: 🎜rrreee🎜🎜Noch einmal, es ist route, nicht router🎜🎜🎜🎜🎜 Verwenden Sie params Um Parameter zu übergeben, verwenden Sie das Attribut name, das dem Sprungpfad entspricht. Ähnlich wie bei der Übermittlung von post werden die Parameter nicht im Sprungpfad angezeigt. 🎜🎜🎜

---

Axios-Wertübertragung🎜🎜Wenn wir Front-End-Daten zur Back-End-Schnittstelle bringen müssen🎜Wir können diese Methode auch zum Übertragen von Werten verwenden🎜 🎜Zum Beispiel: 🎜🎜Code zum Aufrufen der Backend-Schnittstelle im Frontend: 🎜rrreee🎜Empfangen im Backend: 🎜rrreee🎜🎜Beachten Sie, dass es sich um eine Get-Anfrage handelt🎜🎜🎜🎜Diese Anfragemethode wird in der Adressleiste angezeigt 🎜Link zur Adressleiste Beispiel: http://127.0.0.1:3000/api/user/find/10🎜🎜

Methode 2🎜

Komponentenübertragung Die Routing-Konfiguration entsprechend dem Wert 🎜🎜: 🎜rrreee🎜 Sprung mit Parametern: 🎜rrreee🎜🎜Hinweis: Die query🎜🎜🎜 wird hier verwendet und dann in der Unterkomponente empfangen : 🎜rrreee🎜🎜Hinweis: Beim Empfangen müssen die Parameternamen konsistent sein. Verwenden Sie zum Empfangen nicht query. code >Übergeben Sie Parameter, verwenden Sie das Attribut path, um dem Sprungpfad zu entsprechen. Ähnlich wie bei der Übermittlung von get werden die Parameter im Pfad angezeigt. 🎜🎜🎜

axios value transfer🎜🎜Wenn Sie es in Axios verwenden möchten, können Sie es so machen:🎜🎜Zum Beispiel:🎜🎜Das Front-End ruft das Back auf -end-Schnittstellencode:🎜rrreee🎜Tatsächlich ist dies dasselbe wie das Schreiben einer weiteren Abfrage oben, aber auf diese Weise ist es einfacher🎜🎜🎜Hinweis: Es wird mit zwei Backticks umschlossen, gefolgt vom ? Zeichen anstelle von /🎜🎜🎜🎜 Auf diese Weise können mehrere Werte gleichzeitig in der Adressleiste übergeben werden, und das kaufmännische Und wird verwendet, um sie zu verbinden. Es handelt sich um eine get-Anfrage🎜🎜🎜 🎜Da die Adressleiste des Browsers eine Längenbeschränkung hat, wird bei zu vielen Parametern nicht empfohlen, diese Methode zum Empfangen im Backend zu verwenden: 🎜rrreee🎜🎜Hinweis: Fügen Sie nach /delete nichts hinzu hier, verwenden Sie beim Empfang von „Empfangen per Abfrage“🎜🎜🎜🎜Verwenden Sie diese Methode, um den Wert zu übergeben, der auch in der Adressleiste angezeigt wird🎜Beispiel für einen Link zur Adressleiste: http:/ /127.0.0.1:3000/api/user/delete ?name=zhangsan&age=10🎜🎜

Besondere Erinnerung🎜

• Wenn Sie params verwenden code> Um Parameter zu übergeben, müssen Sie <code>name Attribut verwenden, um dem Sprungpfad zu entsprechen
• Wenn Sie query zum Übergeben von Parametern verwenden, verwenden Sie unbedingt das path-Attribut, das dem Sprungpfad entspricht
li>

Methode 3🎜🎜Hier sprechen wir nur über die Wertübergabe von Axios 🎜

Axios-Übergabewert🎜🎜Wenn wir aufrufen Wenn die Endschnittstelle Daten in die Datenbank einfügen (Daten hinzufügen) möchte, können Sie dies wie folgt verwenden: 🎜🎜Das Front-End ruft auf die Back-End-Schnittstelle: 🎜rrreee🎜Der Name und das Alter nach dem Gleichheitszeichen sind die Daten, die Sie aus dem Formular erhalten, diese dann in den Daten darin speichern und sie dann aus den Daten herausnehmen.🎜🎜Empfangen Sie im Backend:🎜 rrreee🎜🎜Hinweis: Verwenden Sie body, um hier zu empfangen, was eine post-Anfrage ist🎜🎜

Wenn wir Daten an den Server übermitteln möchten, verwenden wir im Allgemeinen die post-Anfrage. Wenn Sie diese Methode verwenden, werden die Daten nicht in der Adressleiste angezeigt.

Verwandte Empfehlungen: „vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonSo übergeben Sie einen Wert im VueJS-Framework-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!