[Notes] Vue Mobile development combat skills-Vue-router use

One, dynamic route matching

Dynamic route matching refers to the routing of a pattern, all of which are mapped to the same component.

Const User = {    ' <div>User</div> 'new  vuerouter ({    routes: [{         // Dynamic path parameters, starting        with: {path: '/user/:id ', Component:user}    }]})

A path parameter is used: tag. However, when matching to a route, the parameter values are set to this. $route. Params, which can be used within each component. We can update the user's template to output the ID of the current users:

Const User = {    '<div>user {{$route. params.id}}</div>}

Multiple-segment path parameters can be set in a route, and the corresponding values will be set to $route.params.

1 changes in response routing parameters

When reusing components, you can simply watch (detect changes) $route objects when you want to respond to the routing parameters.

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

2 Advanced match mode

Vue-router uses path-to-regexp as the path matching engine, so many advanced matching patterns are supported, such as: Optional dynamic path parameters, matching 0 or more, one or more, or even custom regular matches.

3 Match Priority

Nested routines are configured to express the dynamic paths of each segment of the URL and also the nested layer components corresponding to a structure.

Const ROUTER =NewVuerouter ({routes: [{path:'/user/:id ', Component:user, children: [{//when the/user/:id/profile match succeeds,                    //userprofile will be rendered in user's <router-view>Path: ' Profile ', Component:userprofile}, {//when the/user/:id/posts match succeeds                    //userposts will be rendered in user's <router-view>Path: ' Posts ', components:userposts}] }    ]})

Second, programming navigation

We can use the router method to write code to implement Router.push (location), which adds a new record to the history stack.

Declarative:

<:to= "">

Programming Type:

Router.push (...)

The method to replace the current history record.

Declarative:

<:to= "..."  replace>

Programming Type:

Router.replace (...) Router.go (N)

Third, named view

Displays multiple views in a peer. You can have multiple individually named views in the interface, rather than just a single exit. If the Router-view does not have a name set, default is defaulted.

<Router-viewclass= "View One"></Router-view><Router-viewclass= "View"name= "a"></Router-view><Router-viewclass= "View Three"name= "B"></Router-view>

Const ROUTER = new Vuerouter ({    routes: [        {            path: '/', components            : {                default:foo,                A:bar,                (B:baz            }        }    ]})

Iv. redirects and aliases

1 redirects

New Vuerouter ({    routes: [        '/A ', redirect: '/b ' }    ]})

The target of a redirect can also be a named route:

New Vuerouter ({    routes: [        '/A ', redirect: {name: ' foo '} }    ]})

Even a method that dynamically returns a redirect target:

New Vuerouter ({    routes: [        '/A ', redirect:to =            {//  method receives the destination route as a parameter             //  reture redirected string path/Path object         }    ]})

2 aliases

Alias means that the alias of/A is either/b, meaning that when the user accesses/b, the URL remains as/b, but the route match is/A, just as the user accesses/A.

New Vuerouter ({    routes: [        '/A ', component:a, alias: '/b ' }    ]})

Five, navigation hooks

The navigation hooks provided by Vue-router are primarily used to intercept navigation and allow it to complete jumps or cancellations. There are several ways to execute hooks when routing navigation occurs: Global, single-route exclusive, or component-level.

1 Global Hooks

You can use Router.beforeeach to register a global before hook.

New= {    //  ...}

When a navigation is triggered, the global before hooks are called in the order in which they were created. A hook is an asynchronous parsing execution, at which time the navigation waits until all hooks are resolve. Each hook method accepts three parameters:

• To:route: The destination to be entered, the routing object.
• From:route: When the navigation is about to leave the route.
• Next:function: Be sure to call this method to resolve this hook. The execution effect relies on the invocation parameters of the next method.

Next (): Make the next hook in the pipeline. If all hooks are finished, the navigation is confirmed (confirmed).

Next (false): interrupts the current navigation. If the URL of the browser changes (possibly the user manual or the browser back button), then the URL address is reset to the address corresponding to the from route.

Next ('/') or next ({path: '/'}): Jumps to a different address. The current navigation is interrupted, and then a new navigation is made.

Make sure that you call the next method, otherwise the hooks will not be resolved. You can also prioritize a global after hook, but unlike before hooks, after hooks have no next method and cannot change navigation.

Router.aftereach (Router = {    //  ...})

2 A route-exclusive hook

New Vuerouter ({    routes: [        {            '/foo ',            Component:foo,            + =                {/ / ...             }        }    ]})

3 hooks within the assembly

You can directly define the hooks directly within the routing component:

Beforerouteenter,beforerouteupdate,beforerouteleave

Const FOO ={Template: ' ... ', beforerouteenter (to, from, next) {//called before rendering the corresponding route for the component is confirm        //cannot get component example ' this '        //because the component instance has not been created before the hook executes}, Beforerouteupdate (to, from, next) {//called when the current route changes, but the component is reused        //For example, for a path with dynamic parameters/foo/:id, when jumping between/FOO/1 and/FOO/2,        //because the same Foo component is rendered, the assembly example is reused. And this hook will be called in this case.         //can access the component instance ' this '}, Beforerouteleave (to, from, next) {//called when navigating away from the corresponding route of the component        //can access the component instance ' this '    }}

[Notes] Vue Mobile development combat skills-Vue-router use