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

This article mainly introduces "analyzing Vue-Router routing and configuration". In daily operation, I believe many people have doubts about analyzing Vue-Router routing and configuration. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "analyzing Vue-Router routing and configuration"! Next, please follow the editor to study!

Nowadays, SPA applications (singe page application) are popular in many applications. Most of the traditional projects use multi-page structure, and when we need to switch content, we often jump to a single html file. At this time, due to the impact of the network and performance, the browser will appear an indefinite blank interface, and the user experience is not good. On the other hand, the single-page application dynamically switches the content of different templates without refresh after the user changes the address bar url through some operations, and the user experience is good. After the vue2.0 version, vue officially launched the vue-router plug-in to achieve the routing jump of a single page. The internal principle is to achieve the effect of no refresh of the whole page by switching between components (uninstalling and installing components).

One. The project introduces routing and configures:

1. In the vue project, install vue-router through cnpm or yarn

Cnpm I vue-router-S

Yarn add vue-router-S

two。 Next, you need to introduce and register routing in the entry file main.js.

Import Vue from 'vue'

Import Router from 'vue-router'

Vue.use (Router)

3. Create a router router

New Router ({

Routes: [

{path: "", component:}

]

})

4. Create a routing table and configure it in the router

Var routes = [

/ / path is the path, and component is the routing component corresponding to the path

{path,component}

]

New Router ({

Routes

})

5. The purpose of injecting router into the root instance is to enable all components to use the routing-related function api through this.$router and this.$route

New Vue ({

El:'# app'

Router

Template:''

Components: {App}

})

6. Use router-view to specify the location of route handoff

7. Using router-link to create a switching tool will render as a tag, add the to attribute to set the path information to be changed, and add the corresponding router-link-active/router-link-exact-active class name to the a tag according to the change of the current route.

Main

News

.router-link-active {

Color:red

}

Multi-level routing configuration in the project:

When creating a routing table, you can create a children attribute for each routing object, with a value of an array, in which you can configure some routing objects to use multi-level routing. Note: only add'/ 'before the path of first-level routing.

Const routes = [

{path:'/home,component:Home}

{path:'/list',component:List,children: [

{path:'inner',component:Inner}

{path:'outer',component:Outer}

]}

]

The switching location of the secondary routing component is still specified by the router-view (specified in the template of the parent routing component)

Inner

Outer

However, it is found that when the routing path is multi-level, it is not conducive to quickly locate the components that match the route. Therefore, the above code can be implemented by naming the route.

We can configure the name attribute for the routing object. When we jump, writing name:inner directly will quickly find the route corresponding to this name attribute, and there is no need to write a large number of urlpath paths. As follows:

{path:'inner',component:Inner,name:'inner'}

In this way, we can easily map between components according to different routes. However, when doing large-scale project development, we will also find that a lot of routes are written in routes, which will make the router file very bad for maintenance and management. In addition, if used in this way, it will also lead to when the user opens the home page, because when webpack packaging, the loading content is abnormal, which leads to slow opening speed. So we need to introduce our routes by lazily loading:

Const routes = [

HomeRouter

]

/ / in the homeRouter.js file

Export defult {

Name:'homeRouter'

Path:'/home'

Component: () = > import ('. / my-async-component')}

}

Routing guards for Vue-Router:

In project development, we often do something before and after the route jump. For example, we can intercept the login of a project by using the routing guard provided in vue-router and the axios interceptor. The routing gatekeepers provided in Vue-router can be divided into three categories, namely, global routing gatekeepers, routing gatekeepers for a single routing hook, and routing gatekeepers within routing components. Okay, let's take a look at it in turn:

Register a global guard through router.beforeEach or router.afterEach:

1-1

Router.beforeEach ((to, from, next) = > {

/ / it will be executed before any route is redirected. Next must remember to execute it, otherwise the route cannot be redirected.

Next ()

})

The guard method needs to accept three parameters: to, from, and next

To: the target to be entered

From: the route from which the current navigation is leaving

Next: be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.

1-2

/ / will be executed after any route is redirected

Router.afterEach ((to,from) = > {

})

Single routing hook guard:

Only beforeEnter, which is executed before entering. The to parameter is the current route.

Routes: [

{

Path:'/ foo'

Component: Foo

BeforeEnter: (to, from, next) = > {

/ / next is also a must.

}

}

]

Routing component Hook Guard:

BeforeRouteEnter (to, from, next) {

/ / this cannot be called internally when this route is called, the component is not initialized

}

BeforeRouteUpdate (to, from, next) {

/ / component instance `this` can be accessed internally

/ / the internal dynamic parameters of the route are changed, and it is called when the component is reused (/ list/1 jumps into / list/2, details component is reused)

}

BeforeRouteLeave (to, from, next) {

/ / you can access the component instance `this` and enter it when you leave the component.

}

At this point, the study on "analyzing Vue-Router routing and configuration" 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.