Laravel 路由和 Vue 路由冲突

Posted 2023-02-22

【中文标题】Laravel 路由和 Vue 路由冲突

【英文标题】：Laravel Routes and Vue Route Conflicts

【发布时间】：2018-11-30 15:51:34

【问题描述】：

我正在尝试使用 laravel 和 vue 创建一个 SPA。还安装了 Voyager 用于管理目的。 Voyager 是 http://localhost:8000/admin .. 使用 laravel web 路由。

现在无法访问它我正在使用 Vue Router 作为我的路由： 我的家乡路线示例（vue）http://localhost:8000/home

app.js

...
import VueRouter from  'vue-router';

import App from './components/App.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const router = new VueRouter(
    mode: 'history',
    routes: [
        
            path: '/home',
            name: 'home',
            component: Home
        ,
    ],
);

const app = new Vue(
    el: '#app',
    components:  App ,
    router,
);

App.vue

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to=" name: 'home' ">Home</router-link> |
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default 
</script>

Home.vue

<template>
    <p>This is the homepage</p>
</template>

index.blade.php

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

web.php

Auth::routes();

Route::get('/vue_capture?', function () 
    return view('index');
)->where('vue_capture', '[\/\w\.-]*');


Route::group(['prefix' => 'admin'], function () 
    Voyager::routes();
);

【问题讨论】：

检查***.com/questions/55318370/…

【参考方案1】：

好的，我解决了！

在we中交换路由声明的顺序。

web.php

Auth::routes();

Route::group(['prefix' => 'admin'], function () 
    Voyager::routes();
);

Route::get('/vue_capture?', function () 
    return view('index');
)->where('vue_capture', '[\/\w\.-]*');