Question

我知道有很多问题可以回答我的问题，但是我无法让他们一个人跑。我想使用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，那么它将起作用。

Answer 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>