


Vue nested routing and 404 redirect implementation method analysis_vue.js
This time I will show you how to use vue nesting routing, what are the precautions for using vue nesting routing, the following is a practical case, let's take a look.
Part 1: vue nested routing
What is nested routing?
Nested routing means that you can continue to use routing under a routed page. Nesting means routing in routing. For example, in vue, if we do not use nested routing, there will only be one <router-view>
, but if we use it, then there will be <router-view> in a component.
, this also constitutes nesting.
Why use nested routing?
For example, in a page, there are three buttons in the upper part of the page, and the lower part displays different content based on clicking different buttons, then we can use this component The lower part is regarded as a nested route, which means that there needs to be another <router-view>
below this component. When I click on different buttons, their The components pointed to by router-link will be rendered into this <router-view>
.
How is the official website introduced?
Every time we talk about the official website, we have to talk about Baidu. BaiduSearchDon’t use it. .
# The official website cited this picture, the intention is good, but the description is too cumbersome. Make a complaint. .
This is a good application interface in real life, usually composed of multiple layers of nested components. Similarly, each dynamic path segment in the URL also corresponds to each layer of nested components according to a certain structure. As shown above.
That is, user represents the user page, and user can be regarded as a single page in vue. For a user, there must be a user. The foo (Xiao Ming, Xiao Hong) here represents a User, the profile here can be understood as a personal homepage, and the posts here can be understood as articles published by this person, and the title may not change, for example, whether you switch to the articles published by this person or switch to this person's personal homepage , we all want to display the same thing at the top, and what we change when switching is the lower part. We can use <router-view> to write this part, then this is nested routing.
With the help of vue-router, this relationship can be easily expressed using nested routing configuration.
<p id="app"> <router-view></router-view> </p>
const User = { template: ` <p class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </p> } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功, // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts }, // 当 /user/:id 匹配成功, // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome }, // ...其他子路由 ] } ] })
OK! This is roughly nested routing! Among them, the first piece of code is to put <router-view>
in the file. This is the top-level exit, which renders the components matched by the advanced routing.
From the routing configuration, we can see: When the path is /user/Xiaoming or /user/小红, the User will be rendered into the page, and this rendering is the top-level route. (:id is Xiao Ming and Xiao Hong,). Then there is a nested route in this page. Of course, if the URL is /user/Xiao Ming, then this secondary route will not display anything. If we want even if it is just /user/Xiao Ming, we have to render something. , then we can set the route corresponding to path: "", so that even /user/Xiao Ming can display more.
If we want to see Xiao Ming's personal homepage, it is /user/Xiao Ming/profile. Then the UserProfile component will be rendered into this secondary route.
If we want to read the articles published by Xiao Ming, it is /user/Xiao Ming/posts. At this time, the UserPost component will be rendered into this secondary route, which is also the secondary route.
In fact, there are only so many concepts, isn’t it very simple!
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!
Recommended reading:
How to use vue to register components
Summary of how to use data-* attributes in H5
The above is the detailed content of Vue nested routing and 404 redirect implementation method analysis_vue.js. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Understand the meaning of HTTP 301 status code: common application scenarios of web page redirection. With the rapid development of the Internet, people's requirements for web page interaction are becoming higher and higher. In the field of web design, web page redirection is a common and important technology, implemented through the HTTP 301 status code. This article will explore the meaning of HTTP 301 status code and common application scenarios in web page redirection. HTTP301 status code refers to permanent redirect (PermanentRedirect). When the server receives the client's

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

PHP domain name redirection is one of the commonly used technologies in website development. Through domain name redirection, users can automatically jump to another URL when visiting one URL, thereby achieving website traffic guidance, brand promotion and other purposes. The following will use a specific example to demonstrate the implementation method of PHP domain name redirection and show the effect. Create a simple PHP file named redirect.php with the following code:

HTTP status code is a kind of status information returned by the web server to the browser. It is expressed in the form of three digits. Among them, status code 302 represents redirection, also known as temporary jump. This article will deeply analyze HTTP status code 302 and discuss its principles and applications. 1. Overview Redirection is an important concept in the HTTP protocol. When the browser sends a request to the server, the server may return a redirection status code to notify the browser that the current request needs to be redirected, that is, the requested resource address is transferred to another location.

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
