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

Detailed usage of Vue timer

This article example shares the specific code of ...

How to encapsulate axios in Vue project (unified management of http requests)

1. Requirements When using the Vue.js framework t...

A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index

Physical Structure of an InnoDB Index All InnoDB ...

Perfect solution to the problem of connection failure after MySQL client authorization

Deploy the MySQL environment locally (192.168.1.1...

js implements some functions of the input component in Element and encapsulates it into a component (example code)

Currently implemented are basic usage, clearable,...

JavaScript tips to help you improve your coding skills

Table of contents 1. Filter unique values 2. Shor...

JavaScript Basics Series: Functions and Methods

Table of contents 1. The difference between funct...

Docker nginx + https subdomain configuration detailed tutorial

Today I happened to be helping a friend move his ...

Vue login function implementation

Table of contents Written in front Login Overview...

Setting z-index property for flash overlay popup layer in web design does not work

By default, Flash will always be displayed at the ...

Steps to solve the MySQL 8.0 time zone problem

Software Version Windows: Windows 10 MySQL: mysql...

How CSS affects the white screen time during initial loading

Rendering pipeline with external css files In the...

The meaning of status code in HTTP protocol

A status code that indicates a provisional respon...

How to dynamically add modules to Nginx

Written in front Often, after we install Nginx ba...

MySQL creates users, authorizes users, revokes user permissions, changes user passwords, and deletes users (practical tips)

MySQL creates users and authorizes and revokes us...