Vue-Vue路由器未推送到其他组件

Question

我有一个Laravel + Vue应用程序。我用Axios调用端点，并用Laravel调用API，显然登录有效。当我单击登录按钮时，路由会更改，但不会更改组件。代码看起来

登录

<template>
      <v-content slot="content">
        <v-container class="fill-height" fluid>
          <v-row align="center" justify="center">
            <v-col cols="12" md="8">
              <v-card class="elevation-12">
                <v-toolbar dark flat>
                  <v-toolbar-title>LoRaWAN</v-toolbar-title>
                </v-toolbar>
                <v-card-text>
                  <v-form>
                    <v-text-field
                      label="Usuario"
                      name="username"
                      prepend-icon="mdi-account"
                      type="text"
                      v-model="username"
                    />
                    <v-text-field
                      label="Contraseña"
                      name="password"
                      prepend-icon="mdi-key"
                      :append-icon="value ? 'mdi-eye' : 'mdi-eye-off'"
                      @click:append="() => (value = !value)"
                      :type="value ? 'password' : 'text'"
                      v-model="password"
                    />
                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-btn block dark @click="submit()">Entrar</v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-content>
    </template>

    <script>
    export default {
      data() {
        return {
          value: String,
          username: "",
          password: ""
        };
      },
      methods: {
        submit() {
          axios
            .post("http://127.0.0.1:8000/login", {
              username: this.username,
              password: this.password
            })
            .then(response => {
              if (response.data.token != null) {
                localStorage.setItem("token", response.data.token);
                console.log("ok");
                this.$router.push({
                  name: "lora",
                  params: { user: this.username }
                });
              }
            });
           .catch(function(errors) {
              let error = errors.response.data.errors;
              let mensaje = "Error no identificado";
              if (error.hasOwnProperty("username")) {
                mensaje = error.username[0];
              } else {
                mensaje = error.password[0];
              }
              Swal.fire({
                title: "Error",
                text: mensaje,
                icon: "error",
                confirmButtonText: "Ok"
              });
            });
        }
      }
    };
    </script>

主要组件

    <template>
      <v-app id="app">
        <layoutDrawer></layoutDrawer>
        <layoutHeader></layoutHeader>
        <v-content>
          <router-view></router-view>
        </v-content>
        <layoutFooter></layoutFooter>
      </v-app>
    </template>

    <script>
    import layoutHeader from "./HeaderComponent.vue";
    import layoutFooter from "./FooterComponent.vue";
    import layoutDrawer from "./SidebarComponent.vue";
    export default {
      components: {
        layoutHeader,
        layoutDrawer,
        layoutFooter,
      }
    };
    </script>

路线

import ContadorComponent from "./components/contador/ContadorComponent.vue";
import GatewayComponent from "./components/gateway/GatewayComponent.vue";
import HomeComponent from "./components/home/HomeComponent.vue";
import MainComponent from "./components/MainComponent.vue";


const routes = [{
    path: '/lora',
    name: "lora",
    component: MainComponent,
    prop:true,
    children: [{
            path: "",
            name: "home",
            component: HomeComponent
        },
        {
            path: "contadores",
            name: "contadores",
            component: ContadorComponent
        },
        {
            path: "gateways",
            name: "gateways",
            component: GatewayComponent
        }
    ]
}];

我需要道具将用户名元素从登录组件传递到其他第二个组件。

所以：¿问题出在哪里？ ¿为什么不加载新组件？

Answer 1

尝试将prop更改为props：

const routes = [{
   path: '/lora',
   name: "lora",
   component: MainComponent,
   props: true, // update
   ...