Vue Router is struggling to properly route the nested components within the application

In my latest project, I decided to create a dynamic dashboard using Laravel and Vue.js. One of the challenges I faced was implementing nested routes using Vue Router:

/admin
/admin/posts
/admin/posts/add
/admin/posts/edit/:id

Despite my efforts, I encountered an issue where switching between /admin/posts and /admin/posts/add didn't route to the correct component. It always redirected me to App.Vue.

Here is a snippet of the code from my web.php file:

Route::get('admin/{any?}', 'App\Http\Controllers\Admin\DashboardController@index')->where('any', '.*');

And here is a section from my app.js file:

(insert your app.js code here)

Code from routes.js:

(insert your routes.js code here)

Snippet from App.vue:

(insert your App.vue code here)

AllPosts.vue content:

(insert your AllPosts.vue code here)

AddPost.vue code:

(insert your AddPost.vue code here)

Thank you for your help!

javascriptvue.jsvuejs2vue-componentvue-router

Answer №1

The route /admin is currently missing a component definition, resulting in its children not having a nested <router-view>. One way to resolve this issue is by assigning it a component that consists solely of a <router-view>:

path: '/admin',
component: { template: '<router-view></router-view>' },  // ✅ Add this 
children: [
...
]

However, an improved structure to consider implementing would be:

routes: [
  {
    path: '/admin',
    redirect: '/admin/posts'
  },
  {
    path: '/admin/posts',
    component: AllPosts,
    children: [
      {
        path: 'add',
        name: 'posts.add',
        component: AddPost
      },
      {
        path: 'edit/:id',
        name: 'posts.edit',
        component: EditPost
      }
    ]
  }
]

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

Exploring details from a JSON Object within a specific section

It's a bit challenging to articulate, but imagine this is the structure of my object: { "success":true, "objects":[ { "name":"Stick", "value":"wood", "size":"large" }... ] } Now, my goal is to r ...

javascriptjson

Learn how to modify parent element attributes based on changes made to its child elements using JavaScript

Is there a way to select the parent element of an element that does not have any identifier? I am looking to achieve the following: <td> <a title="mySweetTitle"/> </td> I need to access the "td" element using its child "a" in ord ...

javascriptjqueryhtmlparent-child

Leveraging JavaScript to attach/append a query parameter to a URL

Currently, I am working with the DNN CMS platform and utilizing a module called ActionForm provided by DNNSharp to generate forms. Although there is an option in this module to display a form in a popup, I am facing a challenge in passing a query string t ...

javascriptasp.netdotnetnuke-moduledotnetnuke-7

Using AngularJS to handle click events and blur events

I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below. <div class="snippe ...

javascripthtmlcssangularjs

Serve static assets files based on the route path instead of using absolute paths

Within Express, I have set up the following route: app.get('/story/:username', function(req, res){ res.render('dashboard.ejs'); }); Prior to that, I am serving any static files located in /public: app.use(express.static(__dirname ...

javascriptnode.jsexpress

Foreign key is not being posted when submitting the form using Laravel and Vue

My dilemma involves managing two tables. Here is the structure of each: Table one, referred to as "parties", consists of the following fields: public function up() { Schema::create('parties', function (Blueprint $table) { $table-> ...

javascriptphplaravelvue.js

The previous method of using `vue/compiler-sfc ::v-deep` as a combinator has been phased out. Instead, opt for the new syntax `:deep(<

When developing with Nuxt 2, I am encountering numerous [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. errors when running npm run dev. After attempting to resolve the issue by changing a ...

cssvue.jsnpmnuxt.jsvue-sfc

Gathering the output from every function within an array of functions

I've searched extensively for a solution to this dilemma, but have had no luck so far. Therefore, I am turning to the community for help. Please feel free to direct me to any existing similar queries. My challenge involves working with an array of fu ...

javascriptarraystypescript

Retrieve a specific row from a table in Bootstrap

Is there a way to highlight a row in a table by clicking on it using CSS classes? $("#infoTable tr").click(function() { var selected = $(this).hasClass("highlight"); $("#infoTable tr").removeClass("highlight"); if (!selected) $(this).addClass( ...

javascriptjquerybootstrap-4

Verify the accuracy of quiz responses with PHP and AJAX

I am working on a picture quiz that has one input field for each image. I am looking for a solution to verify if the value entered into the input field matches the correct answer. If it does match, I need to perform certain operations like adding or removi ...

javascriptphpjqueryajax

Is it possible to retrieve the value of a session attribute set by a servlet in an HTML page using JavaScript?

As a beginner in programming, I am facing an issue with transferring data from a servlet to an HTML page. My servlet forwards to the HTML page using redirect, but I need to access the attribute "poNumber" in my session attributes and display its value on t ...

javascripthtmlservlets

attaching a specific column to the right side of the browser window

Hey there! I have a challenge for you. How can I create a table with 4 columns, but only display 3 of them at all times even when resizing the browser? The 4th column should remain hidden, but I still need to be able to scroll to it if needed. Essentially, ...

javascriptjqueryhtml

Combining Vue's v-model with :value for maximum control

Currently, I am facing an issue where I can only send the input value to the database instead of the selected image value. It is essential for me to have the selected image value sent to the database. This requires using v-model and :value simultaneously ...

vue.jsv-model

Struggling to incorporate blocks into Jade for Express. Encountering errors like "Max Stack Size Exceeded" and issues with setHeader

I am currently using Express along with a simple express-generator server that I created. My first task was to focus on creating the view layout and extending the index page, but unfortunately, I have encountered some challenges. Throughout my process, I& ...

javascriptnode.jsexpresspug

What is the process for enabling data duplication while also updating existing data in MongoDB using AJAX?

I'm facing an issue with updating the database. Whenever I try to update existing data in the database, I encounter a problem where if any value remains the same as the original value in the database, I am unable to update the data successfully. For i ...

javascriptphpajaxmongodb

Observing an array being stored in Vuex within a VueJS application

I currently have a list of customers stored as an array of objects in Vuex. When rendering this list in my component, each row includes a checkbox using Keen-UI: <tr v-for="customer in customers" :class="{ selected: customer.selected }"> <td ...

javascriptarraysvue.jsvuex

Establishing express routing results in API call returning 404 error indicating resource not found

I need some clarification on how to configure my Express routing using app.use and router. My understanding is that I can create a router and then attach it to a route using app.use() to handle all routing related to that route. Can someone assist me in ...

javascriptapiexpressroutes

How can I change the color of a cube in Three.js?

I'm currently working on developing a basic 3D game using three.js. My goal is to create colored cubes, but I'm encountering an issue where all the cubes are displaying the same color. My cube creation code looks like this: var geometry = new ...

javascript3dthree.js

Maximizing the performance of the Three.js WebGLRenderer

My Three.js application sometimes requires a complete re-render without reloading the page. I've tried reusing the WebGLRenderer variable to avoid memory leaks, but they still occur. To maintain performance and prevent the multiplication of WebGL con ...

javascriptperformancememory-leaksthree.jswebgl

The value stored in $_POST['valuename'] is not being retrieved

Having recently delved into ajax, I am encountering some difficulties in making it function properly. The objective of the code is to send two variables from JavaScript to PHP and then simply echo them back as a string. However, instead of receiving the e ...

javascriptphpajaxpost