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

Editor to share with you how to use vue routing, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Concept

The essence of routing is a correspondence, for example, after we enter the url address we want to access in the url address, the browser will request the resource corresponding to the url address.

Then there is a corresponding relationship between the url address and the real resource, which is routing.

Routing is divided into front-end routing and back-end routing

1)。 The back-end routing is implemented by the server and the distribution of resources is completed.

The performance of back-end routing is lower than that of front-end routing, so what we will mainly learn next is front-end routing.

2)。 Front-end routing is implemented by changes in hash values (anchor links).

The basic concept of front-end routing: display different page contents according to different events, that is, the corresponding relationship between events and event handling functions

The main thing the front-end route does is to listen for events and distribute and execute event handlers.

Introduction to Vue Router

It is an official route manager provided by Vue.js. Is a more powerful front-end router, recommended.

Vue Router and Vue.js fit well together to facilitate the development of SPA (single page web application, single-page application) applications.

Vue Router depends on Vue, so we need to introduce Vue before Vue Router.

Characteristics of Vue Router

Support H5 historical mode or hash mode

Support for nested routin

Support routing parameters

Support for programmatic routing

Support for named routing

Support for routing navigation guards

Support for routing transition animation effects

Support routing lazy loading

Support routing scrolling behavior

Steps for using Vue Router

1. Import js Fil

two。 Add route link: the label provided in the route is rendered as a tag by default, the to attribute is rendered as the href attribute by default, and the value of the to attribute is rendered to the hash address beginning with #

User

3. Add route padding (route placeholder)

4. Define routing components

Var User = {template: "This is User"}

5. Configure routing rules and create a routing instance

Var myRouter = new VueRouter ({/ / routes is an array of routing rules routes: [/ / each routing rule is an object, and the object contains at least two attributes, path and component, / / path represents the hash address of the route match, and component indicates that the routing rule corresponds to the component object {path: "/ user", component:User}, {path: "/ login", component:Login}]})

6. Mount the route to the Vue instance

New Vue ({el: "# app", / / Mount routing object router:myRouter} via router attribute) new Vue ({el: "# app", / / Mount routing object router:myRouter} via router attribute)

Add:

Route redirection: you can set the default display components for the page through route redirection

You can add a routing rule to the routing rule, such as

Var myRouter = new VueRouter ({/ / routes is an array of routing rules routes: [/ / path is set to / indicates the initial address of the page /, and redirect represents the new address to be redirected Set to a route {path: "/", redirect: "/ user"}, {path: "/ user", component: User}, {path: "/ login", component: Login}]}) classify nested routes

The most critical code for nested routing is to understand the concept of child routing:

For example, we have a / login route.

Then you can also add child routes under / login, such as:

/ login/account

/ login/phone

Dynamic routing

Add:

1. We can receive parameters through props

2. There is another situation in which we can set props as an object, then pass the data of the object directly to the component for use

3. If you want to get the passed parameter values and also want to get the passed object data, then props should be set to function form.

Named route

Alias the route

Programmatic navigation

Call the api method of js to realize navigation

The above is all the contents of the article "how to use vue routing". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.