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

How to start the spring-boot project using the built-in linux system in win10

1. Install the built-in Linux subsystem of win10 ...

Vue+Element realizes paging effect

This article example shares the specific code of ...

Detailed explanation of how to implement login function by combining React with Antd's Form component

Table of contents 1. React combined with Antd to ...

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

1. Document flow and floating 1. What is document...

Detailed explanation of JS WebSocket disconnection reasons and heartbeat mechanism

1. Disconnection reason There are many reasons wh...

MySQL prepare principle detailed explanation

Benefits of Prepare The reason why Prepare SQL is...

How to use MySQL common functions to process JSON

Official documentation: JSON Functions Name Descr...

How to view and modify the time zone in MySQL

Today I found that a program inserted an incorrec...

Concat() of combined fields in MySQL

Table of contents 1. Introduction 2. Main text 2....

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

example: <html> <head> <style type...

Implementation of TypeScript in React project

Table of contents 1. Introduction 2. Usage Statel...

CentOS 8.0.1905 installs ZABBIX 4.4 version (verified)

Zabbix Server Environment Platform Version: ZABBI...

XHTML Web Page Tutorial

This article is mainly to let beginners understan...

In-depth understanding of the matching logic of Server and Location in Nginx

Server matching logic When Nginx decides which se...

Web project development VUE mixing and inheritance principle

Table of contents Mixin Mixin Note (duplicate nam...