Unable to display the components inside the <router-view/> tag

I am encountering some issues with the router in Vue.cli. My English skills are not the best, but I have provided my code and images for reference. Hopefully, this will help you understand the problems I am facing.

Here is my router/index.js:

import innerView1 from '@/components/mainViews/innerView1'
import innerView2_1 from '@/components/mainViews/innerView2_1'
import innerView2_2 from '@/components/mainViews/innerView2_2'
import innerView3_1 from '@/components/mainViews/innerView3_1'
import innerView3_2 from '@/components/mainViews/innerView3_2'
import innerView4 from '@/components/mainViews/innerView4'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/Home',
	  name:'Home',
	  component: Home,
	  children: [{
		  path: '/innerView1',
		  name: 'innerView1',
		  component: innerView1
		},
		{
		  path: 'innerView2',
		  name: 'innerView2',
		  children: [{
			  path: '/innerView2_1',
			  name: 'innerView2_1',
			  component: innerView2_1
			},
			{
			  path: '/innerView2_2',
			  name: 'innerView2_2',
			  component: innerView2_2
			}
		  ]
		},
		{
		  path: 'innerView3',
		  name: 'innerView3',
		  children: [{
			  path: '/innerView3_1',
			  name: 'innerView3_1',
			  component: innerView3_1
			},
			{
			  path: '/innerView3_2',
			  name: 'innerView3_2',
			  component: innerView3_2
			}
		  ]
		},
		{
		  path: '/innerView4',
		  name: 'innerView4',
		  component: innerView4
		}

	  ]
    },
    {
      path: '/Login',
      name: 'Login',
      components: {
        default: Login

      }
    }

  ]
})

Now, let's take a look at my Home.vue:

import Vue from 'vue';
export default {
	name: "Home",
	beforeCreate() {
	},
	data() {
	  return {
		test: "test",
		homeRoute:this.$router.options.routes[0],
		routes: this.$router.options.routes[0].children,
		router:this.$router
		
	  };
	},
	mounted() {
	  console.log(this);
	},
   
};
<template>
  <el-container>
	<el-header>Header</el-header>
	<el-container>
	  <el-aside width="217px">
		<el-container style="height: 500px; border: 1px solid #eee">
		  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu>
			  <el-submenu v-for='(item) in routes' :key="item.name" v-if="item.children" :index='item.name' >
				<template slot="title" >
				  <i class="el-icon-message" ></i>{{item.name}}
				  </template>
				<el-menu-item v-for='(child,index) in item.children' :key='child.name' :index='item.name+index.toString()' @click="router.push(child.path)">
					{{child.name}}
				</el-menu-item>
			  </el-submenu>
			  <el-menu-item v-else :key='item.name' :index='item.name' @click="router.push(item.path)" >
				{{item.name}}
			  </el-menu-item>
			</el-menu>
		  </el-aside>
		</el-container>
	  </el-aside>
	  <el-container>
		<el-main>
		  <router-view></router-view>
		</el-main>
		<el-footer>
		</el-footer>
	  </el-container>
	</el-container>
  </el-container>
</template>

The innerView1.vue can be displayed successfully.

However, the innerView2_1.vue could not be displayed, along with innerView2_2.vue, innerView3_1.vue, and innerView3_2.vue.

The innerView4.vue, on the other hand, is visible.

Answer №1

To enhance the structure, introduce a new vue file called innerView2.vue to encapsulate 2_1 and 2_2 vues.

import innerView2 from '@/components/mainViews/innerView2'

path: 'innerView2',
          name: 'innerView2',
          component:innerView2,
          children: [{
              path: '/innerView2_1',
              name: 'innerView2_1',
              component: innerView2_1
            },
            {
              path: '/innerView2_2',
              name: 'innerView2_2',
              component: innerView2_2
            }
          ]
        }

and implement it within the innerView2.vue.

<template>
<router-view></router-view>
       
</template>

<script>
export default {
    name:'innerView2'
}
</script>

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

Error: The parser did not expect a closing curly brace

I'm working on a jQuery script that adds an input button to the body and then assigns it an onclick function. The function being called should take two arguments, both variables defined earlier in the code. Here's the current code snippet I have ...

Learn how to implement console-like Tail functionality in a web application using the MaterialUI TextField component as the console interface

Issue with Component: Scroll not Updating as new content is added to TextField: https://i.sstatic.net/lgOtn.png I am currently in the process of developing a live console feature within a React application and I wanted to utilize MaterialUI's TextFie ...

Verify whether the chosen options from a dropdown list coincide with a predetermined value

I am working with a form that generates dropdown lists dynamically. <c:forEach var="companyList" items="${company.detailList}" varStatus="status"> <tr> <td>c:out value="${companyList.employeeName}" /></td> <td> <select ...

Looking to Identify a Click Within a Complicated Component and Retrieve the Component's ID

Currently, I am working with React for development and have a need to capture clicks at the topmost parent level for performance reasons. const clickHandler = (e) => { console.log("clickHandler", e.target) --> I want to identify the child ...

Deleting an object from an array based on its property in React: A step-by-step guide

Trying to create a todo list where clicking on a delete button within a grandchild element triggers an event in the parent component, aiming to delete the corresponding entry in the array. Parent Component (with array and delete function) const tasks = [ ...

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

Using Vue.js - Passing a prop into $.each() within the mounted lifecycle hook

When my component is mounted, I am looking to iterate over an object literal. However, I am encountering difficulties in accessing the prop data within my .each() function. Upon checking with console.log, the prop data appears 'undefined' inside ...

The entire DOM in Angular2+ flickers upon loading a component using ngFor

I am facing an issue where, after a user clicks on an item to add it to a list and then renders the list using ngFor, there is a flickering effect on the screen/DOM. The strange thing is that this flicker only happens after adding the first item; subsequen ...

Is it possible to surpass the limits of Typescript generic types?

Imagine having a function with intricate types function torgle< A extends string, B extends number, Flurg extends string = `[${A}]<>[${B}]` >(flurg: Flurg): string { return `hello, ${String(flurg).replace(/[[\]<>]/g ...

Navigating an Array in Typescript

Angular is linked to node.js, which interacts with mongodb to fetch data successfully. However, I am now faced with the challenge of mapping variables in my typescript component to the backend node.js. When viewing the data structure in the browser consol ...

Searching for items within an array whose inner array contains certain objects can be achieved using lodash

I have arrays containing tasks and tags: const tasks = [ {id: 0, name: 'a', tags: [{id: 0, name: 'q'}, {id: 7, name: 'i'}]}, {id: 1, name: 'b', tags: [{id: 2, name: 'e'}, {id: 4, name: 't'}, ...

Submitting Selected Rows in Angular Material Table: Implementing a Button Click Event

Although a similar question has been addressed on Stack Overflow regarding how to pass selected row values of a table to a button click event in Material design using Angular 6, I did not find the solutions provided there helpful for my specific case. In ...

What is preventing the buttons from filling the entire space of the parent element in this case?

https://i.stack.imgur.com/kbiWi.png I'm trying to figure out how to make the Repos and Stars buttons fill the entire height of their parent container, similar to the Github icon. Unfortunately, the code below is not achieving this effect. I attempted ...

When using supertest to submit a Form Data object, the request body appears to be undefined

I have developed a Vue web application that communicates with a NodeJS REST API. Users of the web application can upload a file along with its information, which is then sent to the backend using the REST API. Here is the code snippet from the web side: va ...

Creating personalized Date and Time formatting on the X axis in Lightningchart JS

I have an X-axis representing time intervals in 15-second increments. ["2020-05-22 14:20:22", "173.9"] ["2020-05-22 14:20:40", "175.3"] ["2020-05-22 14:20:58", "172.4"] In my attempt to add this data to the chart, I used the following code: for(var key ...

Looking for assistance with finding a specific value in Firestore?

As I venture into using firestore for the first time, I'm in the process of creating a registration page with vue. One crucial step before adding a new user to the database is to validate if the provided username already exists. If it does not exist, ...

Encountering issues with jQuery AJAX POST request

I'm currently facing an issue while attempting to send a post request to parse JSON formatted data into my webpage. Here's an example of the query: $("#click").click(function () { $.ajax({ type: "POST", url: "http://ut-pc-236 ...

Implement intro.js on a bootstrap dropdown component

I'm having difficulty using intro.js with dropdown elements. I came across a similar question on this topic with no answer: IntroJS Bootstrap Menu doesnt work If you want to see the error in action, follow these steps: Click on "Aide" (The green bu ...

"Is there a way to use the Bootstrap date picker to navigate to the next or previous month without using the typical next

I am currently utilizing the bootstrap datepicker and I am trying to modify the display of the next month and previous month instead of using arrows. I have implemented some functionality, but it is not working correctly... $(document).ready(function() ...

The Slider component in Material UI's API may not properly render when using decimal numbers as steps or marks in React

I am having trouble creating a Material UI slider in my React application. I can't figure out which property is missing. Below is the code for my React component: import * as React from 'react'; import Slider from '@material-ui/core/S ...