Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to the Service component, the content renders normally. Similarly, clicking on the home path will render the home component content. Why is this happening? Below is my app.js structure:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import App from './views/App'
import Home from './views/Home'
import Service from './views/Service'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: 'servicios',
            name: 'services',
            component: Service
        }
    ]
});

const app = new Vue({
    el: '#app',
    components : { App },
    router,
});

Here is the App.vue file:

<template>
    <div>
        Hello

        <router-link :to="{ name : 'services' }">
            Go to services
        </router-link>

        <router-view>
        </router-view>
    </div>
</template>
<script>
    import PageLogo from '../components/PageLogo'
    import Loading from '../components/Loading'

    export default {
        mounted : function(){
            console.log(this.$router.currentRoute.path)
        },
        components : {
            'page-logo': PageLogo,
            'loading': Loading
        },
        methods : {
            ajaxOver : function() {

            }
        }
    }
</script>

The Home.vue file looks like this:

<template>
    <div class="row">
        Home page
        <router-link :to="{ name : 'services' }">
            Go to services
        </router-link>
    </div>
</template>
<script>
    export default {
        mounted: function() {
            console.log('Hello')
        }
    }
</script>

Lastly, here is the Service.vue file:

<template>
    <div>
        Services page

        <router-link :to="{ name : 'home' }">
            Go to home
        </router-link>
    </div>
</template>

<script>
    export default {
        mounted : function(){
            console.log('Services')
        }
    }
</script>

Please see the following images for visual reference: https://i.stack.imgur.com/jIBiI.png https://i.stack.imgur.com/GXwTt.png https://i.stack.imgur.com/P86zg.png

If anyone has suggestions on how to resolve this issue, it would be greatly appreciated. When reloading the page on any route, the component should be mounted, but it is not displaying properly in the vue router. As a result, the component is not being mounted.

Edit:

Requested information: In App.vue, the log shows /myproject/public_html/

Answer №1

Although I haven't had experience with Laravel before, it seems like the solution you're seeking is related to the base property in Vue.

Here's a snippet from the Vue documentation:

  • type: string
  • default: "/"

    The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".

It appears that because your project is hosted at localhost/myproject/public_html/, vue is interpreting this as /myproject/public_html/ instead of just /.

To remedy this issue, you can specify the base route within the vue-router constructor like so:

const router = new VueRouter({
    mode: 'history',
    base: '/myproject/public_html/',
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Re-Rendering Component in React Continuously Keeps Checkbox Checked Event Flowing

I am working on a material ui checkbox formgroup that is generated dynamically based on data received from an API. Essentially, the user is presented with a question and a set of answers. The user checks all the valid answers and clicks 'next'. I ...

Express JS with multer is unable to process multiple file uploads, resulting in an empty array being

As I develop an app on Glitch with express js, the functionality requires users to upload multiple files. Here is the code snippet that I am using: var express = require('express'); var cors= require('cors'); var bodyParser= requir ...

Is it possible to store data in a nested object using MongoDB?

I'm having trouble inserting the data from req.body into my mongodb collection. In this route, when the add method is triggered, I am attempting to create a query that will store the data from req.body in a nested collection array. router.post(&apos ...

Loop through the AJAX response containing JSON data

Need assistance in extracting specific information from each hotel key and its rates within this JSON structure using JavaScript: [ { "auditData": { "processTime": "1545", "timestamp": "2016-04-08 04:33:17.145", ...

Latest output is fetched by jQuery from the load() method

I'm encountering an issue with the code present in index.html: $(document).ready(function() { $('#generate').click(function() { //$("#results").empty(); $("#results").html(""); $("#results").load("generate.php"); }); }); In addition ...

Comparing Flash and jQuery for RIAs development: Which tool reigns supreme and why?

Could someone clarify which technology is more suitable for developing rich internet applications: Flash or jQuery? Consider aspects like pros and cons, time, cost, and different scenarios. Please provide detailed explanations as it can be quite confusin ...

In Discord.js, the client.login() promise seems to be stuck and never resolves, causing the client.on("ready") event to never be

After creating a simple Discord bot using discord.js, I programmed it to respond with the message "Good morning to you too" whenever someone sends a message containing "good morning". Surprisingly, this feature worked seamlessly until recently when the bot ...

What is the proper way to structure the DATETIME format when making an API request to mySQL?

Frontend code: import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; ... Backend code: //set up express server const express = require("express"); const app ...

Accessing the react-bootstrap tab using the history feature in React

Currently, I am in the process of developing a multi-form page that includes login, registration, and lost password functionalities displayed using tabs with react-bootstrap. The technologies I am using for this project are react 17.0.2, react-bootstrap 2 ...

Tips for setting up a typeorm entity with attention to its nullable fields

How can I assign values to typeorm entities and insert them into the database? import { PricingPatternElement } from file const Element:PricingPatternElement = { displayOrder: 10, elementName: "test", createdAt : getCurrentDate(), createdBy: &qu ...

Ways to expand the `Array.prototype` from an external library in a Node.js environment

While enjoying my time on hackerrank with pure JavaScript, I decided to steer clear of extra arrays or math libraries, unlike the convenience of using python. My approach is robust, but now I'm considering utilizing sugar.js or underscore. I came acr ...

Unable to transfer content to clipboard from a Popper element nested within a Dialogue component in Material-UI

If you want to see the bug, try opening this link in Firefox. It almost crashed Chrome :P https://codesandbox.io/s/73z5293391 Click on the OPEN SIMPLE DIALOGUE button. A dialogue will appear, then click on the TOGGLE POPPER button. Now a Popper will be d ...

Executing multiple asynchronous XMLHttpRequests with React

I experimented with multiple asynchronous XMLHttpRequests based on various examples I came across: var URL=["https://api.github.com/users/github","https://api.github.com/users/github/repos"]; var xhr = [null, null]; for (var i = 0; i < 2; i++) { ( ...

Automatically trigger the Submit button click with this selector

I'm having trouble automating the clicking of a 'Submit' button that only becomes clickable after a specific action is taken. In this case, the user needs to click the TOS checkbox before the button can be clicked. I've been unable to f ...

Enhance the functionality of Jquery UI drag and drop to be responsive even when in a zoom

I came across this drag and drop demo for Jquery UI that was working perfectly at a regular zoom level. However, when I zoomed out to 50%, things started acting strange. Can anyone provide suggestions on how to fix the demo? Link to Demo Any help would be ...

Vue Integration of Self-Hosted TinyMCE

Having trouble integrating TinyMCE into my Vue project. The official TinyMCE Vue.js component (tinymce-vue) works, but only serves as a gateway to request the sources via CDN. I want to use a self-hosted version without downloading the sources directly. U ...

Guide to customizing the default scrollbar colors in Nextjs

When browsing websites like tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox, you may have noticed that they utilize the default scrollbar style but allow users to change its colors through a dark/light mode button. The appearance of ...

Identify when a request is being executed using AJAX by checking the URL

My current code includes multiple ajax requests from various JavaScript files. I am looking for a way to identify specific ajax requests and interrupt their execution in order to prioritize a newer one. Is it possible to detect and stop ajax requests based ...

Running concurrent codes is not possible in Node.js serialport

I am attempting to stream data from the MSP432 xds110 in order to display it on my website in real-time. To achieve this, I have opted to utilize the node.js serialport library for data retrieval. You can find more information about serialport here: In m ...

The eternal Three.js animation that loops endlessly whenever it is clicked

The Objective My aim is to create a straightforward camera zoom in animation that increases the zoom level by a specific amount each time the button is clicked. The Current Status I have successfully implemented the animation using Three.js and linked i ...