Vue - Vue 路由不存在

Question

我在Laravel+Vue中有一个项目。在Laravel中，我有一些创建端点和启动页面的路径。

Laravel路线

Route::get('/', 'AuthLoginController@showLoginForm');
Route::post('/login', 'AuthLoginController@login');
Auth::routes();
Route::resource('gateways', 'GatewayController');
Route::resource('contadores', 'ContadorController');

'/'使用登录组件路由到刀片文件。

登录组件有此代码。

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

正如我们所看到的，当登录端点返回令牌时，我们希望推送到其他'ora'路由。

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-routes文件中，我声明了它，所以我不知道为什么返回这个。也许拉拉威尔在路线上引发了冲突。在laravel路由文件中，我测试了这个代码并运行

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

主视图是刀片文件，带有主组件也许项目不认识的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>