Detailed explanation of Vue-router nested routing

Detailed explanation of Vue-router nested routing

step

1. Configure routing rules and use the children configuration item:

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //Configure child routing through children {
				path:'news', //Do not write: /news
				component:News
			},
			{
				path:'message', //Do not write: /message
				component:Message
			}
		]
	}
]

2. Jump (write the full path):

   <router-link to="/home/news">News</router-link>

Analyzing the code

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • How to use vue3+TypeScript+vue-router
  • Detailed explanation of vue-router 4 usage examples
  • Detailed explanation of routes configuration of Vue-Router
  • Vue-router example code for dynamically generating navigation menus based on backend permissions
  • Vue-Router installation process and principle detailed
  • A super detailed Vue-Router step-by-step tutorial
  • Detailed explanation of the installation and use of Vue-Router
  • Complete steps to use vue-router in vue3
  • Vue Router vue-router detailed explanation guide
  • How to use Vue-router routing
  • Vue routing vue-router usage explanation

<<:  Analysis of Linux kernel scheduler source code initialization

>>:  Thirty HTML coding guidelines for beginners

Recommend

Solution to the problem that the virtualbox virtual machine cannot connect to the external network in NAT mode

background Two network cards are configured for t...

Randomly generate an eight-digit discount code and save it to the MySQL database

Currently, many businesses are conducting promoti...

How to shrink the log file in MYSQL SERVER

The transaction log records the operations on the...

How to transfer files between Windows and Linux

File transfer between Windows and Linux (1) Use W...

Vue uses Split to encapsulate the universal drag and slide partition panel component

Table of contents Preface start Basic layout Data...

Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)

MySQL tuning Explain tool detailed explanation an...

Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes

This article uses examples to describe the common...

Detailed explanation of views in MySQL

view: Views in MySQL have many similarities with ...

Example of using Docker to build an ELK log system

The following installations all use the ~/ direct...

A brief discussion on event-driven development in JS and Nodejs

Table of contents Event-driven and publish-subscr...

A brief discussion on MySQL large table optimization solution

background The amount of new data in the business...

The first step in getting started with MySQL database is to create a table

Create a database Right click - Create a new data...

Detailed explanation of the practical application of centos7 esxi6.7 template

1. Create a centos7.6 system and optimize the sys...

Packetdrill's concise user guide

1. Packetdrill compilation and installation Sourc...

js to realize payment countdown and return to the home page

Payment countdown to return to the home page case...