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 explanation of the pitfalls of nginx proxy socket.io service

Table of contents Nginx proxies two socket.io ser...

Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL

If you want to solve the slow problem once and fo...

The connection between JavaScript and TypeScript

Table of contents 1. What is JavaScript? 2. What ...

A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes

CSS plays a very important role in a web page. Wi...

Install MySQL database 5.6 source code under Linux and change the login user password

This article mainly explains how to install the M...

mysql-8.0.17-winx64 deployment method

1. Download mysql-8.0.17-winx64 from the official...

Advantages of INSERT INTO SET in MySQL

Insert data into mysql database. Previously commo...

Issues with using Azure Container Registry to store images

Azure Container Registry is a managed, dedicated ...

Detailed explanation of the idea of ​​achieving the point-earning effect with CSS animation

In the recent project, we need to create an effec...

Example of how to deploy Spring Boot using Docker

Here we mainly use spring-boot out of the box, wh...

How to use glog log library in Linux environment

Generate Linux library The Linux version uses cen...

Basic knowledge of MySQL database

Table of contents 1. Understanding Databases 1.1 ...

Summary of Vue first screen performance optimization component knowledge points

Vue first screen performance optimization compone...

How to install the green version of MySQL Community Server 5.7.16 and implement remote login

1. Download MySQL Community Server 5.7.16 and ins...

WeChat Mini Program implements the likes service

This article shares the specific code for the WeC...