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

'/'路径转到带有登录组件的 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 路线（主要组成部分 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');

view home是带有 Main Component的 blade 文件。也许项目无法识别且仅适用Laravel路线的Vue路线发生了某些事情。

问题：Vue路线是否正确声明？有人看到错误了吗？

Answer 1

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

您的萝拉路线的网址应类似于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>

Vue-Vue路线不存在

2 个答案: