配备Laravel的Vue 3路由器

uklbhaso 于 2022-11-17 发布在 Vue.js

关注(0)|答案(1)|浏览(175)

我是Vue JS的新手，我用Laravel安装了VUE 3，它显示404 Not Found。我尝试了很多，但找不出问题。

应用程序刀片.php*

<div class="min-h-screen bg-gray-100" id="app">           

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
 </div>

应用程序.js*

import { createApp } from "vue";
import router from './router'
import CompaniesIndex from './components/companies/CompaniesIndex'

createApp({
    components: {
        CompaniesIndex
    }
}).use(router).mount('#app')

索引.js*

import { createRouter, createWebHistory } from "vue-router";

import CompaniesIndex from '../components/companies/CompaniesIndex' 
const routes = [
    {
        path: '/welcome',
        name: 'companies.index',
        component: CompaniesIndex
    },
    
]

export default createRouter({
    history: createWebHistory(),
    routes
})

成分索引值 *

<template>
Hello world
</template>

<script>
export default {
    
}
</script>

网页.php*

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

欢迎使用.blade.php*

<body class="antialiased">
         <h1>Welcome to Laravel Vue 3</h1>
    </body>

vue.js

来源：https://stackoverflow.com/questions/71856260/vue-3-router-with-laravel

1条答案

按热度按时间

myzjeezk1#

1.我不确定，但可能在where语句中的routes/web.php有错误，因为. *正则表达式应该匹配任何字符串，而这是不带空格的.*。请尝试：

Route::view('/{any}', 'app')->where('any', '.*');

1.如果您要创建SPA，则app.blade.php不应包含任何标记，它应该是空白HTML模板，并带有您的应用所需的脚本：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">

     <script src="{{ mix('assets/js/app.js') }}" defer></script>
     <link href="{{ mix('assets/css/app.css') }}" rel="stylesheet">
</head>
<body>
     <noscript>
         <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
</body>
</html>

1.然后你只需要把你的Vue应用程序挂载到#app div，这在你的app.js中似乎很好。

赞(0）回复(0）举报 2022-11-17

我来回答

配备Laravel的Vue 3路由器

1条答案

相关问题

热门标签

最新问答