Capture every URL path in NuxtJS page navigation

One interesting feature of NuxtJS is the ability to assign routes in a specific way.

For instance, by naming a file pages/_book.vue, we can access the route localhost:3000/my-book with the parameter params.book set to "my-book".

But what if some books are nested deep within multiple directories? We want to capture the entire route in the params.book variable, with each directory separated by "/". So, a route like

localhost:3000/finance/strategies/experts
should result in params.book being "finance/strategies/experts".

Is there a way to achieve this functionality?

It's important to note that the directory structure may be complex and unknown, making it impossible to create static structures like pages/_book/_type/_level.vue.

Answer №1

Utilize Unknown Dynamic Nested Routes to handle routes that do not match other patterns.

When using the following file structure:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

It will result in the following behavior:

/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue

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

Different ways to send data from JavaScript to Python using the 'POST' method

I have this specific section of code from my GAE application that utilizes webapp2 framework to receive data from a form through the post method. class RenderMarksheet(webapp2.RequestHandler): def post(self): regno = self.request.get('content ...

Learn how to manipulate CSS classes within a slot using Vue.js

Struggling to crack a simple logic puzzle, I desperately need your assistance. My aim is to add or modify the class name within a slot. // Parent component <div class="col"> <slider> <slide v-for="intro in compOpts.blockIntro"> ...

Refreshing is not necessary when submitting a form using Ajax to post data

Initially, I find myself torn between using method or type, where if I define the method in the form, do I still need to define it in the ajax call? If not, why does ajax return undefined in the console? Furthermore, the code below triggers a 405 POST met ...

What are the steps to initiate a new project using the CLI on a Linux operating system

I've got a project up and running in Vue JS with Node JS installed. Now I want to create a new project using CLI. Do I need to install another version of Node JS for this new project? ...

The desired jQuery datatable theme did not take effect on the JSP page

Experimenting with various JQuery themes and controls. Attempting to use a datatable example and apply the default theme provided here. However, I have been encountering difficulties. Seeking assistance to understand the root cause of this issue. Also, in ...

Cypress Error: Unable to locate module: Error - Unable to find 'cypress/types/lodash'

I am currently conducting my inaugural test in Cypress directly from the Visual Studio IDE. Everything was running smoothly until I suddenly encountered the error below, without making any changes or updates whatsoever. My Cypress (version 7.0.0) was inst ...

DiscordjsError: The client attempted to use a token that was not accessible

Hey there, I'm currently working on implementing a bot for my server and encountered an issue while attempting to create a member counter for voice channels. After completing the setup, I ran node index.js in the terminal, only to receive an error ind ...

Deciphering JSON information extracted from a document

I am currently working on a Node JS project where I need to read a file containing an array of JSON objects and display it in a table. My goal is to parse the JSON data from the array. Below is a sample of the JSON data: [{"name":"Ken", "Age":"25"},{"name" ...

The functionality of the JavaScript Array Map function is not meeting our expectations

I am encountering an issue with the Array.map function that is not behaving as expected. Below is a simplified example to help me understand where I am going wrong. Here is the code snippet in question: console.log(this.reportTestData) let data = this.rep ...

The step-by-step guide to setting up the masonry-layout on a VUE

I recently added the Masonry Layout plugin using npm, but I'm facing issues with loading it into my component. import "masonry-layout"; export default { name: "playerSkillComponent", props: ['player'], mounted: function () ...

Is it possible to create Interactive Tabs using a Global BehaviorSubject?

Trying to adjust tab visibility based on different sections of the Ionic app, an approach involving a global boolean BehaviorSubject is being utilized. The encapsulated code has been condensed for brevity. In the provider/service globals.ts file, the foll ...

Optimize the Loading Sequence of Javascript

I am using a WordPress site with various scripts included. In the header of my site, I have enqueued jQuery and jQuery UI as follows: wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js', nu ...

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Is there a way to toggle a visible button when the array changes? I'm having trouble implementing this. What is the most effective method? Check out my example below: https://codesandbox.io/s/relaxed-poincare-vv6xh?file=/src/components/HelloWorld.vu ...

How can I retrieve an image from a library and automatically update the image in SharePoint every 30 seconds?

I have a web part and I have written the code below: However, it is only fetching one image. How can I fetch all images from the library and change the image every 30 seconds using JavaScript or jQuery? public class MSDN : System.Web.UI.WebControls.WebPa ...

Vue. Where should this snippet be placed?

After delving into Vue, we were inspired by the concept of a store, which allowed us to separate page state from presentation. We developed an alert component that showcased the content of the alert string stored in store.pageError. As we aimed to incorpo ...

Using Ant Design with Formik to dynamically set field values in a form

When I click the "Change" button in an Antd table with data, the entire line of data is passed to a function as an object. However, I am having trouble inserting the data into the fields. What should I do? How can I set data to Antd input using an externa ...

Having difficulty naming the request while using ajax to send data to a local server

I have set up an AJAX request to be sent to my PHP server: var xml = new XMLHttpRequest(); xml.open("POST", "request.php", true); xml.setRequestHeader('query','test'); xml.send(); Upon receiving the AJAX data in PHP, I am facing some ...

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

I am currently utilizing icoMoon to import a series of SVG icons. The structure of the html I'm trying to create using ngIf is as follows: <div class="contactIcon"> <svg class="icon icon-envelop"> <use xlink:href="symbol-d ...

What is the reason behind the lack of asynchronous functionality in the mongoose find method

Outdated code utilizing promises I have some legacy code implemented with mongoose that retrieves data from the database. The schema being accessed is AccountViewPermission. Everything works fine as I am using a .then, which essentially turns it into a Pr ...

Having trouble displaying nested JSON data in a DataTable

Hey, I've got a complex JSON array that's pretty nested and minified: { "items" : [ { "track" : { "album" : { "name" : "Pressure Makes Diamonds" }, "arti ...