The vue <router-link> don’t want to work as a link, it shows as a simple text. What I’m doing wrong?


I’m using vue js in laravel project. I want to make my project single page application, so I need vue routes. I installed the latest versions of vue-loader, vue-template-compiler, vue, vue-router, but the problem still exists.

app.js

import bootstrap from 'bootstrap';

import {createApp} from "vue";
import { createRouter, createWebHistory } from 'vue-router'
import Login from './components/auth/Login.vue'
import Register from "./components/auth/Register";

window.$ = require( "jquery" );

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

const router = createRouter({
    history: createWebHistory(process.env.APP_URL),
    routes
})

const app = createApp({});
app.component('login', Login);
app.mount('#app');
export default router

vue.blade.php

<body>
<div id="app">
    <router-link to="/register">Harrison</router-link>
    <router-view> </router-view>
</div>

<script src="{{mix('js/app.js')}}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
</body>
</html>

I get tired of searching in google for the answers, nothing helps. Can you help me to understand what I’m doing wrong?

Source: Vue – Stack Overflow

November 21, 2021
Category : News
Tags: laravel | single-page-application | vue router | vue-component | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.