'No match found for location with path - Laravel 8 and Vue 3

Hi I have read that this question is already answered but that answer did not work to me.. I have my code like this:

/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
{
  path: '/login',
  name: 'login',
  component: () => import('../views/LoginView.vue')
}
]

const router = createRouter({
history: createWebHistory('/laravel-vue3/'),
 routes
})

export default router

My app.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
createApp(App).use(router).mount('#app');

My .htaccess works without public in the path. I am working in localhost so I go http://localhost/laravel-vue3 to go to the website

BUT it does not work.

I have my router view in App.vue like this:

<template>
<div>
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="">
                Portal Conecta Mayor
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav me-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ms-auto">
                    <!-- Authentication Links -->
                    <li class="nav-item">
                        <router-link class="nav-link" to="/login">Login</router-link>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="">Register</a>
                    </li>
                </ul>
            </div>
            <router-view />
        </div>
    </nav>
   </div>
   </template>
   <script>
   export default {

   }
    </script>

When I go to http:localhost/larave-vue3 it opens my App.vue and it works BUT I receive this message:

[Vue Router warn]: No match found for location with path "/laravel-vue3/"

I added that to history: createWebHistory and it still does not work.

When I click login it displays this error:

Look the error

How can I fix the router problem in vue 3 with Laravel 8? Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source