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
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提交，参数不会出现在跳转路径里。
当我们需要把前端的数据带到后端接口时
也可以用这种方式进行传值
例如：
前端中调用后端接口的代码：
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中使用的话，可以这样：
例如：
前端调用后端接口代码：
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传值
当我们调用后端接口要在数据库中插入数据的时候（添加数据），可以这样使用：
前端调用后端接口：
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
$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. 🎜🎜🎜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. 🎜🎜🎜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🎜🎜params verwenden code> Um Parameter zu übergeben, müssen Sie <code>name Attribut verwenden, um dem Sprungpfad zu entsprechen
query zum Übergeben von Parametern verwenden, verwenden Sie unbedingt das path-Attribut, das dem Sprungpfad entsprichtbody, 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
