laravel - Vue - Vue 路由不存在

问题描述

我在Laravel + Vue有一个项目。在 Laravel 中，我有一些用于创建端点和起始页的路线。

Laravel 路线

Route::get('/', 'Auth\LoginController@showLoginForm');

Route::post('/login', 'Auth\LoginController@login');

Auth::routes();

Route::resource('gateways', 'GatewayController');

Route::resource('contadores', 'ContadorController');

'/'路由到带有Login Component的Blade文件。

登录组件有这个代码。

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

正如我们所看到的，当登录端点返回令牌时，我们想要推送到其他“lora”路由。

Vue 路由文件

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/main/MainComponent.vue";

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

const router = new VueRouter({
    mode: 'history',
    routes: routes
});


new Vue({
    vuetify: new Vuetify(),
    router
}).$mount("#app");

和lora路线 ( Main Componen t)

<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 "./partials/HeaderComponent.vue";
import layoutFooter from "./partials/FooterComponent.vue";
import layoutDrawer from "./partials/SidebarComponent.vue";
export default {
  props: {
    username: { type: String, default: "Invitado" }
  },
  components: {
    layoutHeader,
    layoutDrawer,
    layoutFooter
  }
};
</script>

问题：如果我去http://127.0.0.1:8000/lora返回这条路线不存在。在 vue 路由文件中我声明了它，所以我不知道为什么会返回它。也许 Laravel 会产生冲突或与路线有关的东西。在 laravel 路由文件中，我测试了这段代码并且可以工作

Route::get('/test', function () {
    return view('home');
})->name('home');

视图主页是带有主要组件的刀片文件。也许项目无法识别并且仅适用于 Laravel 路由的 vue 路由发生了一些事情。

问题：vue 路由是否正确声明？有人看到一些错误吗？

标签： laravelvuejs2

laravel - Vue - Vue 路由不存在

问题描述

解决方案

推荐阅读