Не отображается содержимое компонента в router-view. Vue3+Laravel10+Vite

Question

Делаю SPA, роутинг через vue-router. При нажатии на ссылки адресная строка меняется, но содержимое компонентов не отображается в router-view. Ошибок в консоли нет, вывод текста в консоль через компонент проходит. Как сделать вывод компонента в router-view?

app.blade.php:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Гостевая книга</title>
    @vite('resources/css/app.css')
    {{-- <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script> --}}
</head>

<body>
    <div id="app">
        <p>
            <router-link :to="{ name: 'Main' }">Главная</router-link>
            <router-link :to="{ name: 'Login' }">Войти</router-link>
            <router-link :to="{ name: 'Register' }">Регистрация</router-link>
        </p>
        <router-view></router-view>
    </div>
    @vite('resources/js/app.js')
</body>


</html>

app.js:



import './bootstrap';
import {createApp} from 'vue';
import {createRouter, createWebHashHistory} from 'vue-router';

import Main from '../js/components/Main.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';

const routes = [
    {
        
        path:'/',
        name: 'Main',
        component: Main
    },
    {
        path:'/register',
        name: 'Register',
        component: Register
    },
    {
        path:'/login',
        name: 'Login',
        component: Login
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
const app = createApp({});
app.use(router);
app.mount("#app");
//console.log(router);

Общий вид компонента(на примере Login.vue):


    <template>
  <div class="container">
    <h1>Вход</h1>
  </div>
  
</template>

<script>
export default{
}
console.log('login')
</script>

vite.config.js:


    import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css',
             'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            vue: 'node_modules/vue/dist/vue.esm-bundler.js',
        },
    },
});

package.json:


    {
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.8.0",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@vitejs/plugin-vue": "^4.4.0",
        "bootstrap": "^5.3.2",
        "bootstrap-vue": "^2.23.1",
        "vue": "^3.3.6",
        "vue-router": "^4.2.5"
    }
}

БЛОГ НА HUSL

Не отображается содержимое компонента в router-view. Vue3+Laravel10+Vite

Ответы (0 шт):