Retrieve a comprehensive inventory of all routes within a Vue project and automatically create a sitemap for the website - Vue Project

Imagine I've set up a route like this:

import Vue from "vue";
import Router from " vue-router";
import BookRoutes from "./routes/book";

Vue.use(Router)

const router = new Router({
    routes:[
        {
            path: "/book",
            name: "book",
            component:{
               render(c) {
                  return c("router-view")
                }
            },
            childern: BookRoutes

        }
    ]
})

And in the 'book' route, there is an index.js file:

const BookProfile = () => 
import (/* webpackChunkNames: "BookProfile" */ "@/components/profile/book/BookProfile")

import BookRoutes from "./Book";

export default [{path: 
                "book/:bookId",
                "name": "profile.book",
                 redirect: {name: "profile.book.fee"},
                 component: BookProfile,
                 children: BookRoutes
                 
               }]

Inside Book.js:

const BookFee = () => import (/* webpackChunkName: "BookProfilr" */)

export default:[{
    path: "book-fee",
    name: "profile.book.fee",
    component: BookFee
}]

I've created several similar routes. How can I retrieve a list of all routes, ideally with their IDs populated, but if not, just a list of all the routes created in a Vue project.

If you need more information, please feel free to ask.

Answer №1

<template>
    <ul>
      <li v-for="(item, key) in items" :key="key">
        <router-link :to="item.name">{{item.name}}</router-link>
      </li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            items: []
        }
    },
    created() {
        this.$router.options.routes.forEach(route => {
            this.items.push({
                name: route.name,
                path: route.path
            })
        })
    }
}
</script>

Answer №2

If you ever need to access the routes in any child component, you can simply utilize the getRoutes method of the router instance like so:

mounted(){
 let availableRoutes = this.$router.getRoutes()

}

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

The JQuery Ajax call returned with a status of 0 and an empty ResponseText

Here is the ajax request I am using: $.ajax({ type: "POST", url: "https://forlineplus.forsa.com.co/projects/validar-redireccion-sio?fup=" + idFup, //contentType: "application/json; charset=utf-8", ...

Is there a way to verify if a given input is a URL in VueJS?

Trying to determine if a user-input text is a URL in VueJS. Need assistance on crafting the regex for this task. Here's my current code! function checkIfValidUrl(url) { let regEx = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#= ...

Utilizing jQuery for JSON parsing

Within my JavaScript code, I am working with the following array: var versions = [{"id":"454","name":"jack"}, {"id":"4","name":"rose"} {"id":"6","name":"ikma"} {"id":"5","name":"naki"} {"id":"667","name":"dasi"} ] I need to extract the name from this ar ...

Regular expression for parsing any CSS font properties

Does anyone have a reliable regex to break down a css font string into its individual components? 12px arial italic bold sans-serif 12px/50px verdana etc ...

A method in JQuery to replace an input with a select element is by using the replace

I have multiple input fields with pre-existing values. My goal is to replace these inputs with select dropdowns that have the same options while retaining the original values. Here is the current HTML structure: <span id="span1"> <input type=" ...

How does the use of nodejs, a server-side scripting language, tie into ReactJs or other front-end languages?

Can Node, being a server-side scripting language, be effectively utilized in the development of front-end applications such as npx create-react-app or npx create-nuxt-app? ...

Combining arrays of objects into one single array

I possess a large array of intricately nested objects, akin to this (imagine adding 76 more products for a clearer picture): [ { "ProductID": 11, "ProductName": "Queso Cabrales", "SupplierID": 5, "CategoryID": 4, "QuantityPerUnit": " ...

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

What is the best method for breaking down this JSON data into distinct 'objects'?

I am struggling with deserializing JSON data into multiple instances of an object I have defined. Here is how the object is structured: function Question_Value__c () { this.Id=null; this.Name=null; this.Question__c=null; this.Order__c=null ...

What are the steps for integrating vue-i18n into a Vue web component?

As I work on developing a Vue web component with vue-cli 3 and the --target wc option, I have encountered an issue. The vue-i18n plugin that I need to use requires certain options to be passed to the main Vue instance as shown below: new Vue({ i18n: n ...

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

Angular 12 - Encountering an issue with undefined properties when trying to access 'values'

Currently in the process of upgrading Angular Version from 8 to 12. Successfully made the upgrade from 8 to 11 without any issues. However, upon updating Angular to version 12, encountered an error stating "loadComponent TypeError: Cannot read propert ...

The initial ajax request may sometimes return as 'undefined' during its first call

I have been working on creating a text input help feature similar to a desktop using the datatable.in table with keyboard navigation. In order to achieve this, I am dynamically changing the data source and also altering the header column. I have been succe ...

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

My task is to develop a web application using HTML, CSS, and JS with the following functionality: Retrieve a list of users from this API: https://jsonplaceholder.typicode.com/users. Upon clicking on a user, show a list of albums associated with that user ...

Replacing parts in Vue when clicking on an element

I am currently working on a website with a storytelling concept. The idea is that when a user clicks on a certain element, a new layout will be shown - either a full-screen video or an image. After clicking the "next" button, a different content should be ...

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

I am working on a Rails 6 application where I compile assets using Webpack 4.39.1 with the help of the Webpacker gem. In my webpack configuration file (config/webpack/environment.js), I have included JQuery 3.4.1 and Popper.js as part of the ProvidePlugin ...

"Expand" Button following X buttons

Check out this JSFiddle for the code: $(document).ready(function(){ $( ".keywordsdiv" ).each(function(){ $(this).children(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>');//add a uniq ...

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

On the homepage, there is a modal window that appears upon every pageload (it will be changed later), however, there seems to be an issue with the 'email sign up' form inside the window. The form seems to momentarily display at the top of the si ...

Transform the default WordPress gallery into a stunning slideshow with FlexSlider 2 integration

Greetings, I am searching for a solution to modify the default WordPress gallery in order to integrate the FlexSlider 2 plugin. I specifically want to incorporate this module or feature from this link, but I have been unable to figure it out myself. Your ...

Using only Node.js, demonstrate the image

I want to show an image using only Node.js without involving HTML or ID's. I have been looking for solutions but most examples I find use HTML, which I prefer not to use. Unfortunately, I don't have any code to share, but I'm wondering if th ...