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

Editor to share with you how to use Vue routing router, I believe 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 go to know it!

Use routing plug-ins in a modular way

(1) installation

Npm install vue-router

(2) build file directory

Create a router folder under the src directory, and then create an index.js

(3) here we create routes in a modular way to facilitate code management, here only to register the path plug-in, and then create a routing object. Expose the created routing object through the export default keyword.

/ / index.jsimport VueRouter from 'vue-router'import Vue from' vue'import Home from ".. / views/Home"; Vue.use (VueRouter) / / register the routing plug-in export default new VueRouter ({routes: [{path:'/', component:Home}]})

(4) introduce the created routing object into the entry file main.js and mount it to the Vue instance.

/ / main.jsimport Vue from 'vue'import App from'. / App.vue'import store from'@ / store'import router from'@ / router'// here is the introduction of the routing object we created. Modular programming thinking Vue.config.productionTip = falseVue.prototype.bus = new Vue () new Vue ({store, router, render: h = > h (App),}). $mount ('# app') uses routing declarative navigation

It can be understood to jump through the label.

Declarative navigation: or

Define routing rules

{path:'/', component:Home name:home}

(1) router-link navigation tag to attribute uses string mode

Go to home

(2) how the router-link navigation tag to uses objects

Use paths to match

Go to home

The router-link navigation tag to attribute uses the object's way and matches with the route name

Go to home programmatic navigation

It can be understood as JS to jump.

Programmatic navigation: router.push (...)

The following example contains the knowledge of dynamic route matching and query query parameters. If it is not clear, you can look at the contents of both first and then come back to see the contents here.

/ / string router.push ('home') / / object router.push ({path:' home'}) / / named routing router.push ({name: 'user', params: {userId:' 123'}}) / / with query parameters, becomes / register?plan=privaterouter.push ({path: 'register', query: {plan:' private'}})

Note: if path,params is provided, it will be ignored, and the query in the above example is not the case. Instead, in the following example, you need to provide routed name with params or handwritten complete path with parameters:

Const userId = '123'router.push ({name:' user', params: {userId}}) / /-> / user/123router.push ({path: `/ user/$ {userId}`}) / /-> / user/123// where the params is not valid router.push ({path:'/ user', params: {userId}}) / /-> / user dynamic route matching

Define routing rules

{path:'/user/:id', component:User name:user} go to home go to home go to home

By defining it as above, the dynamic routing parameter can be obtained through $route.params.id: ID value is' 01'

Note:

When matching in the way of objects, it cannot be done in the way of path and params. Only through name and params

The routing rule {path:'/user/:id'} cannot be matched in the following way, and the following expression can only be understood as'/ user'

Even if the route is matched through the * wildcard, the params will not be passed, because the path attribute will not parse the params property.

{/ / will match all paths path:'*'} {/ / will match any path beginning with `/ user-` path:'/ user-*'} wildcard match path

We usually use * to capture other unexpected paths, do a bit of processing, and usually navigate it to the 404 error page.

.

When you use a wildcard, a parameter named pathMatch is automatically added to $route.params. It contains the parts where URL is matched by wildcards

Query parameter query.

Query parameters do not want dynamic routing parameter matching. Even if path is used, query can still be used to pass parameters.

The parameters passed by the above query can be obtained through this.$route.query.name.

Respond to changes in routing parameters

If the route navigates from / user/01 to / user/02, the original component instance is reused. Because both routes render the same component, this means that the component's lifecycle hook will not be called again. Therefore, it is necessary to listen for changes in parameters in other ways to respond.

(1) Monitoring via watch

Const User = {template: '..., watch: {$route (to, from) {/ / respond to routing changes.}

(2) Monitoring through navigation guards

Const User = {template: '...', beforeRouteUpdate (to, from, next) {/ / react to route changes... / / don't forget to call next ()} name route, route alias, redirect

In particular, I put these three concepts together in order to better distinguish the difference between them. These contents are all configured in the routing rules.

{path:'/ pageOne', component:PageOne, alias: "/ firstPage", name: "pageOne", redirect: {name:'pageTwo'}}, {path:'/ pageTwo', component:PageTwo, name:'pageTwo'}

(1) named route: it can be understood as giving a name to this route.

Even if the route is given a name through the name attribute

Routes: [{path:'/ user/:userId', name: 'user', component: User}]

(2) Route alias: it can be understood as the second name of this route.

For example, the alias of / an is / b, and when the user visits / b, URL will keep / b but the content matched by the route will be / a, that is, knowledge URL content display / b content is actually / a

Note: aliases should be expressed in the way of paths instead of writing names directly like named routes.

Const router = new VueRouter ({routes: [{path:'/ asides, component: a, alias:'/ b'}]})

(3) Redirect: it can be understood as directly jumping to / b when accessing / a.

There are three forms of expression for redirection:

String

Const router = new VueRouter ({routes: [{path:'/ averse, redirect:'/ b'}]})

Object

Const router = new VueRouter ({routes: [{path:'/ asides, redirect: {name: 'foo'}}]})

Method

Const router = new VueRouter ({routes: [{path:'/ averse, redirect: to = > {/ / method receives the string path / path object} of the target route as the parameter / / return redirection]}) nested route

Nested routes can be understood that the components rendered by the matching routes contain routing components,'/ user' when we match a route to render a component User, but if we want to continue to match in the User component. Then we need to further match through / user/childRouteName. "childRouteName" is the value of the corresponding path in our routing rule children.

{path:'/ user', component: User, children: [{/ / when / user//profile matches successfully / / UserProfile will be rendered in User path: 'profile', component: UserProfile}, {/ / when / user//posts matches successfully / / UserPosts will be rendered in User path:' posts', component: UserPosts}]}

In APP.Vue

In the User component

Const User = {template: `User component `}

Note:

A nested route is defined, that is, if a children is defined, it must be a complete route to match correctly. That is, when the / user/profile match is successful, but the / user match is not successful.

Named view

When rendering multiple views on a component at the same time, note that multiple views are displayed at the same level, rather than nested. At this point, you can solve this problem by naming the view.

Routing rule definition

{path: "/ namingRoute", components: {/ / Note that components ends with's', which is not used before. Default:Home, one:PageOne, two:PageTwo}}

Component definition

/ / components corresponding to rendering default / / components corresponding to rendering one / / components corresponding to rendering two

When the route is matched when URL is: / namingRoute, it will be rendered according to the corresponding router-view view component.

Navigation Guard (1) Global Guard

It can be understood as a guard defined by the global router instance object router.

Route.beforeEach (Global Front Guard)

Mode of use:

BeforeEach ((to,from,next) = > {/ /...})

Router.beforeResolve (global resolution guard)

After the guard and asynchronous routing components are parsed within all components, the parsing guard is called

Mode of use:

Router.beforeResolve ((to, from, next) = > {/ /...})

Router.afterEach (global rear hook)

The hook does not accept the next function or change the navigation itself:

Mode of use:

Location used by router.afterEach ((to, from) = > {/ /...}): usually index.jsconst router = new VueRouter ({...}) / / global front guard router.beforeEach ((to, from, next) = > {/ /...}) / / global resolution guard router.beforeResolve ((to, from, next) = > {/ /.}) / / global rear hook router.afterEach ((to)) From) = > {/ /...}) (2) Route exclusive guard

Can be understood as a guard defined on a routing rule

BeforeEnter

(3) Guards in the component

Can be understood as a guard defined in a component

BeforeRouteEnter

No component instance has been created, which is called before the route is confirm.

Const User = {template: `...`, beforeRouteEnter (to, from, next) {/ / call / / No before rendering the corresponding route for this component by confirm! Yes! Get the component instance `this` / / because the component instance has not been created}} before the guard executes

Note:

The guard cannot access the vue instance object directly using this because the component instance has not been created at this time. However, you can orient the instance of the component by passing a callback to the next method.

Pass a callback to next (), valid only for beforeRouteEnter!

BeforeRouteEnter (to, from, next) {next (vm = > {/ / access component instance} via `vm`)}

BeforeRouteUpdate (2.2 New)

Called when the route changes and the component is taken

Const User = {template: `...`, beforeRouteUpdate (to, from, next) {/ / call / / when the component is reused, for example, for a path / foo/:id with dynamic parameters, when jumping between / foo/1 and / foo/2, / / the component instance will be reused because the same Foo component will be rendered. And this hook will be called in this case. / / you can access component instance `this`}}

BeforeRouteLeave

Called when the navigation leaves the route corresponding to the component

Const User = {template: `...`, beforeRouteLeave (to, from, next) {/ / navigate to call / / access the component instance `this`} to navigate the parsed process when leaving the corresponding route of the component.

Execution order of normal first access routes

BeforeEach Global routing Front Guard

BeforeEnter exclusive routing Guard

BeforeRouteEnter component routing Guard

BeforeResolve Global routing Resolution Guard

AfterEach Global routing Post Hook

Dom rendering

Call the callback function passed to next in the routing guard of the beforeRouteEnter component. And pass in the component instance of the creation number as an argument to the callback function.

The above is all the contents of the article "how to use Vue routing router". 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.