问题描述
我知道有很多问题可以回答我的问题，但是我无法让他们一个人跑。 我想使用vue路由器将字符串从组件A传递到组件B。 在以下示例中，如何从组件B中的组件A输出'name'的值。
组件A模板：
<form >
<input placeholder="type your name" v-model="name">
<button v-on:click="sayHello" type="submit" >Submit</button>
<script>
sayHello() {
this.$router.push({ name: 'ComponentB', params: {
name: '{this.name}'}, props:true });
}
</script>
成分B：
<template>
<div class="container">
<h1> Hello {{$route.params.name}}!</h1>
</div>
<script>
export default {
data(){
return{
props: ['name']
}
}
}
</script>
路由器
{
path: '/ComponentB',
name: "CompB",
component: CompB,
props: true
}
仍然不知道如何在不使用url参数的情况下实现这一目标。
如果我将CompB的路径更改为ComponentsB/:name它将起作用。
1楼
您的路由器属性在组件A中声明的this.$route中
因此，在您的情况下：
成分A：
<script>
sayHello() {
this.$router.push({ name: 'ComponentB', query: {
name: this.name }, props:true });
}
</script>
成分B：
<template>
<div class="container">
<h1> Hello {{ $route.query.name }}!</h1>
</div>
</template>
我建议阅读来使用props解耦您的组件。