The vue <router-link> don't want to work as a link, it shows as a simple text. What I&#03-CodePudding

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?

CodePudding user response：

You need to create a Vue app component. Assume this is the content of a file called app.vue:

<template>
    <router-link to="/register">Harrison</router-link>
    <router-view> </router-view>
</template>

<script>
export default {
  name: "App"
}
</script>

Then make your html file look like that:

<body>
<div id="app"></div>

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

Finally, change some lines in your app.jsfile:

...
import App from "app.vue"
...
const app = createApp(App);
...

And then it should work.
(Btw: are you on Vue2 or on Vue3?)

CodePudding user response：

It looks like app.js is not registering the Vue Router plugin. To register the plugin, use app.use():

// main.js
const router = createRouter(/*...*/)

const app = createApp(App)
app.use(router)