Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use vue-router Command View". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use the vue-router Command View.

1. Introduction of the effect

Without saying much, let's start with a picture of the opening. Let's take a look at the effect of the last picture.

II. Named views

2.1. Introduction

When we need to display multiple views at the same time (at the same level), we can take advantage of named views in vue-router. We can easily achieve this with the following named view syntax. When a route path matches, we check whether it needs to be in the three view areas of navbar, default, and tabbar. Then, when we define a route, we change component to components to define a routing path corresponding to n sibling components, and then display it in the corresponding view area.

How does it feel? is it very simple? after knowing the concept and grammar, let's try it together.

2.2, use

First of all, we define NavBar navigation bar, Tabbar label bar common components in vue library learning we use Vue.component to define common components, in vuecli we use .vue file, here we define common components according to routing shorthand. Then let's define the route matching rules.

Alias is a routing alias. Components adds an s to display multiple views at the same time (at the same level), and then the view area displays the matching component data with the complete code. You can run it through the browser to view the results.

The advantages of the above code can not be seen through this html file, but in practical development, when using .vue file to encapsulate common components, and when the project needs to be imported and registered to use, you will find it particularly convenient to directly modify the route through the named view to determine whether navbar and tabbar are displayed.

At this point, I believe you have a deeper understanding of "how to use the vue-router Command View". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.