Is it possible to utilize the Vuejs router routes array to dynamically generate a navigation menu?

Below is the code I am using to set up VueJS routes and pass them into a router:

export const routesArray = {
  routes: [
    {
      path: '/',
      name: 'Add Stash',
      component: Form
    },
    {
      path: '/log',
      name: 'Stash Log',
      component: Stitch
    },
    {
      path: '/user/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/user/login',
      name: 'Log in',
      component: Login
    }
  ]
}
export default new Router(routesArray)

I have imported this code into a Vue Component and used it to iterate through the array, dynamically generating navigation as shown below:

<ul class="nav">
  <li v-for="item in routes">
      <a :href="item.path"> {{item.name}}</a>
  </li>

The navigation display works perfectly, but clicking on a navigation item leads to a broken link: http://localhost:8080/log#/

Instead of the desired link format like this: http://localhost:8080/#/log

I am unsure how to bypass the hash. Any suggestions or ideas?

Answer №1

Swap out a for router-link.

<ul v-for="route in routes">
    <router-link :to="route.path">{{route.name}}</router-link>
</ul>

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

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

Changing buffer from base64 to UTF-8 encoding in Node.js

My application imports messages from the Notes folder of Gmail using the imap npm module. When following the example on their GitHub page, all message contents are read into a buffer: stream.on('data', function(chunk) { count += chunk.len ...

How to retrieve data from a child component in VueJS using the parent component

I am utilizing the vue-cli scaffold for webpack Presently, my Vue component structure/heirarchy appears as follows: App PDF Template Background Dynamic Template Image Static Template Image Markdown Within the app level, I am seeking a vuejs component ...

Encountering issues with properly updating the Vuex store

Looking at my Vuex 2 store: const datastore = new Vuex.Store({ state: { socketcluster: { connection: false, channels: [] }, selected_offers: [] }, mutations: { addOffer: function(offer) { datastore.state.s ...

What benefits does Observable provide compared to a standard Array?

In my experience with Angular, I have utilized Observables in the state layer to manage and distribute app data across different components. I believed that by using observables, the data would automatically update in the template whenever it changed, elim ...

What is the most effective method for populating an array with all images from a particular directory?

I recently installed a pdf viewer plugin on my website (check it out here: ), and I have a question regarding its functionality. I am looking to include approximately 60 - 70 pages in this flip book, but I am unsure of how to proceed. I have attempted var ...

Retrieving the return value from an AJAX call in C# using asynchronous methods

When it comes to retrieving a value using Ajax on the client side, I rely on this JQuery function: $.ajax({ type: "POST", url: "/my-page.aspx/checkout", contentType: "application/json; charset=utf-8", dataType: "json", success: functio ...

A simple way to add a value from a select option into a textarea when there are several dropdown menus and select elements sharing the same

I have several divs with the same class names where I need to input a value from a dropdown menu into the textarea that belongs to the div where the select element is located. I want this function to work smoothly even with more than 10 divs, which is why ...

What is the best method for ensuring that cheese rises to the top?

Is there a way to increase the value of the variable cheese? I suspect it has something to do with how the variable cheese is defined each time the JavaScript is activated, but I'm not sure how to go about it. Can you offer some guidance on this? & ...

Having trouble getting your Vue Tailwind project to start due to a postcss error?

I am experiencing an issue while trying to run my project on my laptop. The project works fine on all other devices with the same code, but for some reason, I am unable to run tailwind CSS on it. The error message I'm receiving is as follows: in ./sr ...

What is the method for comparing array elements to a regular expression in this particular scenario?

My array contains strings with a specific format: obj-meta_version-11_info obj-meta_version-12_info obj-meta_version-13_info I need to loop through this array to identify objects that adhere to this naming convention. I think the regex pattern should be ...

Using JQuery to make a GET request and receive a JSON response, then selecting particular objects

I am in the process of developing a straightforward web application. The concept involves users inputting a license plate number, which will then connect to an OpenData API based on Socrata that houses information about all registered vehicles in my countr ...

Is it possible to utilize dynamic imports in conjunction with a for loop in Next.js?

I often use dynamic import to bring in multiple components efficiently. Is it feasible to use a 'for' loop for this purpose? import dynamic from "next/dynamic"; let Dynamic = []; for (let i = 1; i < 80; i++) { const DynamicComponent = d ...

Explore the capabilities of redux independent of the react framework

I've been searching for hours trying to find a way to access the store (to dispatch and observe) without using React Components, but have had no luck. Here's my situation. I created the store in the root of the App: import { Provider } from &ap ...

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

Production environment experiencing issues with Stripe functionality due to element remaining mounted

When making a payment in development mode, everything goes smoothly. However, when I switch to production, I encounter the following error message: v3:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please e ...

Error: VueJS mixins do not include the property definition

I've been trying to incorporate Mixins into my Vue.js code, but I've run into a few issues :/ Here's the current code for two test modules : ErrorBaseMixin.vue <script> import ErrorAlert from './ErrorAlert'; expor ...

Extract targeted content from a webpage

I'm in need of assistance with printing a specific section of my application. Within the application, there is a user list that shows their first and last names. When I click on a user, a popup displaying more detailed information about them appears. ...

Why do images placed in the public folder not appear in React when I deploy using gh-pages, but display correctly once the code is pushed to gh-pages?

After making a modification to the images path from ../images/${props.data.coverImg} to images/${props.data.coverImg}, I noticed an interesting behavior. The images appear broken on localhost-3000 when installing gh-pages, but they display correctly on th ...

Filtering in JavaScript can be efficiently done by checking for multiple values and only including them if they are not

In my current coding challenge, I am attempting to create a filter that considers multiple values and only acts on them if they are not empty. Take the following example: jobsTracked = [ { "company": "Company1", ...