Issue: Child Pages not found in Nuxt RoutingDescription: When navigating

Currently working on a Nuxt application that utilizes the WordPress REST API to fetch content. While my other routes are functioning correctly, I am facing challenges with nested pages.

The structure I have implemented in my Nuxt app is as follows:

pages
--- _slug
------ index.vue

For instance, in WordPress, an example would be:

How To Get There (slug: how-to-get-there)
-- Roads & Road Safety (slug: roads-road-safety)

I seem to be misunderstanding how routing functions because this setup does not work, resulting in a 404 error when trying to access the child page.

Could someone provide guidance on the correct method of routing a child page from WordPress?

javascriptvue.jsvuejs2vue-routernuxt.js

Answer №1

I came across this information while reading the Nuxt guidelines.

"In order to create a dynamic route with a parameter, you must either define a .vue file or a directory with an underscore prefix."

Therefore, the structure should be as follows:

pages/ 
--| _slug/ 
-----| _slug.vue

Source: Nuxt Routing Guide

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

Struggling to establish a default value for an AngularJS select dropdown

I'm diving into the world of AngularJS and facing a challenge with setting a default value on a select box. I've successfully listed objects in the select box and binding it to the model works seamlessly. However, as soon as I introduce a default ...

javascriptangularjs

Saving Arrays through an Input Form in JavaScript

I am working with an HTML form that looks like the following: <div class="form-group"> <label for="first_name">1st Name</label> <input type="text" id="first_name" placeholder="First Name" class="form-control"/> </div> ...

javascriptjqueryhtmlajaxforms

I am attempting to initiate a password reset process within vue.js

How can I fetch information using this link in vue.js http://localhost:2020/rest-password${token}&id=${data._id} Below is my code snippet: const submit = async () => { console.log('e'); try { const user = await axios.post( ...

vue.js

What is the best way to save an object with methods in a Vue application?

Looking for the best way to store complex objects with methods in Vue? Take this object as an example: const behavior = { onClick() { console.log('click') }, onDoubleClick() { console.log('double click'); }, on ...

vue.js

Having trouble with importing and receiving the error message "Module 'clone' not found."

When trying to use clone.js in Angular 2, I imported it with import * as clone from 'clone'. It was listed in my package.json dependencies and successfully imported into node_modules. However, when viewing the output, I encountered the error mes ...

javascriptangularnpm

Timeout error occurred in Async.js because the callback was already triggered

Whenever I execute index.js, I encounter an ETIMEDOUT or ECONNRESET error followed by a Callback was already called error. Initially, my assumption was that the issue stemmed from not including a return before calling the onEachLimitItem callback. Consequ ...

javascriptnode.jscallbackpromiseasync.js

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

I am looking to achieve a specific behavior with an image, where it fits the viewport while maintaining its aspect ratio and allowing for zooming similar to how Chrome or Firefox handle local images. Here are the details of my project: The image I have is ...

javascripthtmlcssangularimage

Ways to transmit information from a modal to a function

Trying to figure out how to update data in an ng-grid after submitting a modal form with multiple text input controls. Should the ajax create function be called within the $scope.open controller section or resolve? $scope.open = function (size) { var mo ...

javascriptjqueryruby-on-railsajaxangularjs

The Mongoose findOne function encountered an error when attempting to convert a value to ObjectId

Trying to solve a perplexing exception that has left me scratching my head for over an hour. Error message: CastError: Cast to ObjectId failed for value "[email protected]" at path "_id" for model "Account" My goal is to fetch an Account using the ...

javascriptmongodbexpressmongooseecmascript-6

Create a dynamic select2 field based on the value selected in another dropdown menu

Starting with an initial dropdown where a value needs to be selected: <select id="indexID" name="indexID" class="form-control" onChange="updateSector();" style="width:300px;"> <option value='' selected>Choose an Index</option> ...

javascriptphpjqueryjquery-select2

What is the best way to apply a single slot-element to multiple elements?

Considering a slot structure like: <span slot="?" slot-scope="data>...</span> What placeholder should be used in place of the question mark to make it versatile for any implementation? ...

vue.js

What is the process for establishing a connection between two sets of data?

I am working with two mongoose models: user.js and note.js, which correspond to the collections notes and users. I want users to be able to save their notes, but I'm unsure how to create relationships between these collections. Ideally, I would like t ...

javascriptdatabasemongodbmongoosemongoose-schema

Unable to render chart using angularjs-nvd3-directives

After developing a basic Angular - nvd3 project, I decided to utilize liveData.example from the angularjs-nvd3-directives Library on Github. To tailor it for my needs, I made enhancements to integrate with my REST API. Here is the REST API endpoint: http ...

javascriptangularjs

Issue with Videogular: hh:mm:ss Date filter not functioning properly

I am currently working on integrating Videogular into my audio player application. Below are the settings provided in the example code on this particular page: <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display> ...

javascriptangularjsdatedatetimevideogular

The error thrown states: "TypeError: Unable to access the property 'getFieldDecorator' of undefined in a React component."

Encountering this error: > TypeError: Cannot read property 'getFieldDecorator' of undefined > _class.render src/containers/RegisterTenant/register.js:81 78 | this.setState({ 'selectedFiles': files }); 79 | } 80 | > ...

javascriptreactjsantd

The error message from NPM indicates that a script named "dev" is missing, although the package.json file does contain the "dev

After running npm run dev, I encountered the error message: missing script: dev In my package.json file, the scripts section includes "dev": "nuxt" ...

vue.jsnpmnuxt.js

Managing user sessions in Laravel and Vue to optimize shopping cart functionality

I am currently developing a Laravel Vue application for a shop. Both the frontend and backend are hosted on the same server. I have decided not to include any authentication features like registration, but I still want to create a session for the user when ...

laravelvue.jssessioncookiesaxios

No results returned by Mongoose/MongoDB GeoJSON query

I have a Schema (Tour) which includes a GeoJSON Point type property called location. location: { type: { type: String, enum: ['Point'], required: true }, coordinates: { type: [Number], required: true ...

javascriptangulartypescriptmongodbmongoose

Looking for a way to store data in local storage so it remains even after the page is reloaded? I tried adding a local storage function, but it doesn't appear to be

I am currently working on a project involving a work day scheduler and I am facing challenges in saving data within the schedule events, like at 8am, and making sure it persists on reload. The colored time block element that changes as hours pass in the da ...

javascripthtmljquerymomentjs

Encountered an unanticipated symbol at column 2 while using the Angular Google Recaptcha

I have integrated the Angular Google Recaptcha directive into my application from https://github.com/VividCortex/angular-recaptcha. However, upon running my application, I encountered an error stating that I am using my public key instead of my private key ...

javascriptangularjsrecaptcha