Vue - Vue 路由不存在

Question

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

Laravel 路线

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

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

Auth::routes();

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

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

'/' 路由转到带有 Login 组件 的 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 Component）

<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');

视图主页是 blade 文件，其中包含 Main 组件。 项目无法识别的 vue 路由可能会发生某些问题，并且只能使用 Laravel 路由。

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

Answer 1

您的客户端和服务器在同一个端口上运行：http://127.0.0.1:8000。

lora 路由的 url 应该类似于 http://127.0.0.1:8001/lora

Answer 2

我找到了部分解决方案。在 Laravel 路线 我需要把这个

Route::get('{any?}', function () {
    return view('layout');
})->where('any', '.*');

每次用户推送到另一个页面时都会加载布局刀片。

@extends('layouts.app')
@section('content')        
    <layout-component></layout-component>
 @endsection

布局组件

<template>
  <v-app id="app">
    <router-view></router-view>
  </v-app>
</template>