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

This article mainly introduces "what are the functions of vue router". In daily operation, I believe many people have doubts about what functions vue router has. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the functions of vue router?" Next, please follow the editor to study!

VueRouter is the official route manager for vue.js. It is deeply integrated with the core of vue.js, making it easy to build single-page applications. Vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. The single-page application of vue is based on routing and components, which are used to set access paths and map paths to components. Traditional page applications use some hyperlinks to switch and jump pages. In vue-router single-page applications, it is the switching between paths, that is, the switching of components.

VueRouter includes the following features:

Nested routes / View Chart

Modular, component-based routing configuration

Routing parameters, queries, wildcards

View transition effect based on vue.js transition system

Fine-grained navigation control

Links with automatically activated cssclass

Html5 historical mode or hash mode, automatically degraded in IE9

Custom scroll bar behavior

There are fixed steps for vueRouter to learn routing:

Create a component

Configure routing (component mapping path)

Create a routing instance object router

Create and mount the vue instance while injecting path information using the router configuration parameter.

Route jump part: router-link is a component, which is used to set a navigation link and switch different HTML content (components). The to attribute is the target address. Since the content part to be displayed, router-link is rendered as a tag by default.

Route exit: the components corresponding to the matching path when the route jumps will be rendered here.

The code is as follows:

.first {

Width:300px

Border:3pxsolidred

}

.second {

Width:300px

Border:3pxsolidblue

}

{{msg}}

At this point, the study on "what are the functions of vue router" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.