The components are not visible to the Vue.js router

I recently set up a Vue application and included some new routes. However, I'm encountering issues as they are not functioning as expected.

Here is the code in my router/index.js file:

import Vue from 'vue'
import Router from 'vue-router'

import QuestionList from '@/components/pages/QuestionList'
import SessionList from '@/components/pages/SessionList'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/questions',
      name: 'QuestionList',
      component: QuestionList
    },
    {
      path: '/sessions',
      name: 'SessionList',
      component: SessionList
    },
  ]
})

export default router

This is how my component looks like:

<template>


<h1>test</h1>
</template>

<script>
export default {
}
</script>

<style>
</style>

Despite setting localhost:8000/questions or localhost:8000/sessions, nothing appears to happen. Additionally, I am unable to see these components using Vue Dev Tools. Can anyone point out what may be wrong?

Answer №1

According to the official documentation, it is recommended to include a hash in your URL structure like localhost:8000/#/sessions:

The default mode for vue-router is hash mode, which uses the URL hash to mimic a complete URL and prevent page reloading when the URL changes.

To eliminate the hash, you can switch to the router's history mode, making use of the history.pushState API for URL navigation without refreshing the page:

const router = new VueRouter({
       mode: 'history',
        routes: [...]
})

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

Tips on utilizing the ternary operator when binding in Vue

<label class="switch"> <input type="checkbox" v-on:change="updateRequiredData(list.input_permission_id,selected, selected == 'Applicant' ? list.status : selected =='Guaranter' ? list.guaranter_required : selected ='Refer ...

Utilizing <router-link> in conjunction with vue-custom-element

Recently, I've delved into Vue and am attempting to develop a Vue application that can be integrated into a non-Vue application. To achieve this, I've decided to utilize vue-custom-element. However, I'm encountering difficulties with impleme ...

Is there a way to flip a figure that is flipped upside down?

I'm currently working on creating a map using a json file to go from d3.js to Three.js. However, when the map is displayed, it appears upside down. I'm wondering if there is a way to flip it so that it displays correctly. As a newcomer to d3 and ...

Display the PDF without providing the option to download

When clicking on any of the PDF links, it will open in a new tab with options available in the PDF reader. https://i.sstatic.net/2bVB7.jpg I am looking to disable only the download button within the PDF. To elaborate further, a client will upload their ...

There appears to be an unspecified parameter in the controller related to the ng

After fetching data from an API, I use it to populate a form with cascading select fields. I have two functions in place to filter the array based on the selected options, but I am running into an issue where I cannot access properties from ng-model. For ...

How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

When using ng-init, you have the ability to utilize multiple variables: ng-init="var1=value1; var2=value2" I attempted something similar with ng-repeat but unfortunately it did not work as expected ng-repeat= "var1 in var1s; var2 in var2s" Is there a p ...

Manipulating object information within a nested for loop

I have a variable called jobs in my scope, which is an array containing objects for each department along with their respective data. [ “Accounting”: { “foo” : “foo”, “bar” : "bar" }, “Delivery”: { ...

Exploring the intricacies of Implementing Chromecast Networks, with a curious nod towards potentially mirroring it with

In my current project, I am aiming to replicate the functionality of a Chromecast on a Roku device. To achieve this, I need to first discover the Roku using UDP and then send an HTTP POST request to control it. During a recent developer fest where I learn ...

What could be the reason my page is not refreshing after submitting a form?

After creating a quiz application that submits user answers to a MySQL database and visualizes the data using a D3 script, I encountered an issue. Despite updating the database correctly upon form submission, the page does not refresh automatically, causin ...

What is the functionality of ngCloak?

<html ng-app> <body> <p ng-cloak>{{foo}}</p> </body> </html> My interpretation: The HTML page is displayed. Once the DOMContentLoaded event is triggered, Angular begins bootstrapping. During the compilation ph ...

Tips on resolving the distinct key issue in React and eliminating it

Attention all React beginners! I'm encountering an issue that states: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `resultTable`. See https://fb.me/react-warning-keys for more information. ...

How can I toggle the visibility of a div based on whether a variable is defined or not?

How can I display a specific div on my webpage only when certain variables in PHP pull out a specific result from a database? I attempted to use the code snippet below, but it's not working as expected. Can someone provide guidance on how to achieve ...

How can I use jQuery to reload the page only at certain intervals?

I'm currently using jQuery to reload a page with the code provided below: <script type="text/javascript"> $(document).ready(function(){ setInterval(function() { window.location.reload(); }, 10000); }) & ...

Is there a way to stop mouse panning in ThreeJs OrbitControls without affecting the ability to pan using keys?

My goal is to prevent users from panning with their mouse while still allowing them to pan using the keys. When I use controls.enablePan = false;, it disables key panning as well. Trying to rebind the mouse buttons requires me to assign a button to Orbit ...

Dividing one SVG into Multiple SVGs

I'm facing a challenge with loading an SVG overlay on a Google Map. The SVG file is quite large, about 50mb, resulting in a delay of around 10 seconds for it to load in the browser. One solution I'm considering is splitting the SVG into 171 smal ...

The functionality of 'rich-voice-editor' is currently not operational when trying to utilize the npm package known as quill-rich-voice-editor

Currently, I am utilizing an npm package within my Angular project. "quill": "^1.3.6", "quill-rich-voice-editor": "^0.4.0", Upon adding the line 'rich-voice-editor': true, it triggers the error message cor ...

Tips for resolving the Vue.js error "Prevented from loading local resource"

When attempting to add icons and logos to my website using localhost, I encountered an issue where the files were detected but not loaded. An error message stating "Not allowed to load local resource" appeared. Additionally, I tried running the app with ...

Updating state atoms in Recoil.js externally from components: A comprehensive guide for React users

Being new to Recoil.js, I have set up an atom and selector for the signed-in user in my app: const signedInUserAtom = atom<SignedInUser | null>({ key: 'signedInUserAtom', default: null }) export const signedInUserSelector = selecto ...

Output PHP code within the HTML content using javascript's innerHTML functionality

I wrote a PHP function that increments by +1 every time it is executed. function count_likes(){ $collect=file_get_contents('like_counter.txt')+1; $count=file_put_contents("like_counter.txt", $collect); echo $collect; I also have a JavaScr ...

Tips for troubleshooting a node module that is part of a build process

When working on my applications, I often rely on the NPM package.json to handle my build tools. However, I've come across a module that seems to have a bug. I'm eager to debug it, but I'm unsure how to do so within the context of the build t ...