Summary of 10 advanced tips for Vue Router

Preface

Vue Router is the official routing manager for Vue.js.

It is deeply integrated with the core of Vue.js, making it easy to build single-page applications.

Features included are:

• Nested routes/view tables
• Modular, component-based routing configuration
• Route parameters, queries, wildcards
• View transition effects based on Vue.js transition system
• Fine-grained navigation control
• Links with auto-activated CSS classes
• HTML5 history mode or hash mode, automatically downgraded in IE9
• Custom scroll bar behavior
  

This article is a summary of some of the things the author encountered in actual projects, mainly including:

1. Responding to routing parameter changes
2. Route matching
3. Advanced Matching Mode
4. Matching Priority
5. The second and third parameters of push and replace
6. Routing View
7. Redirect
8. Decoupling $route with props
9. Navigation Guard
10. Guard's next method
    

I hope this article helps you.

text

1. Respond to routing parameter changes

For reused components (only the routing parameters have changed), the lifecycle function hook will not be called. How can the component be refreshed?

watch

watch:
  '$route' (to, from) {
  // Respond to route changes...
  }
}

beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}

2. Route matching

{
// Will match all paths path: '*'
}
{
// Will match any path starting with `/user-` path: '/user-*'
}

Note: When using wildcard routes, make sure the order of the routes is correct, that is, the route containing the wildcard should be placed last. The route { path: '*' } is usually used for client-side 404 errors.

If you use History mode, make sure your server is configured correctly.

When a wildcard is used, a parameter called pathMatch is automatically added to $route.params.

It contains the part of the URL that is matched by wildcards:

//Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
//Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

3. Advanced Matching Mode

// Named parameters must consist of "single characters" [A-Za-z09] // ?Optional parameters { path: '/optional-params/:foo?' }
// Routing can set or not set the foo parameter, optional <router-link to="/optional-params">/optional-params</router-link>
<router-link to="/optional-params/foo">/optional-params/foo</router-link>
 
// Zero or more parameters { path: '/optional-params/*' }
<router-link to="/number">No parameters</router-link>
<router-link to="/number/foo000">a parameter</router-link>
<router-link to="/number/foo111/fff222">Multiple parameters</router-link>
 
 
// One or more parameters { path: '/optional-params/:foo+' }
<router-link to="/number/foo">a parameter</router-link>
<router-link to="/number/foo/foo111/fff222">Multiple parameters</router-link>
 
// Custom matching parameters // You can provide a custom regexp for all parameters, which will override the default ([^\/]+)
{ path: '/optional-params/:id(\\d+)' }
{ path: '/optional-params/(foo/)?bar' }

4. Matching priority

Sometimes a path may match multiple routes.

At this point, the matching priority is based on the order in which the routes are defined: the first defined has the highest priority.

5. The second and third parameters of push and replace

In versions 2.2.0+, you can optionally provide onComplete and onAbort callbacks as the second and third arguments to router.push or router.replace.

These callbacks will be called when the navigation completes successfully (after all async hooks have been resolved) or terminates (navigates to the same route, or to a different route before the current navigation completes). In 3.1.0+, the second and third parameters can be omitted, and router.push or router.replace will return a Promise if Promise is supported.

Next, let's look at a few examples to see when the second and third parameters are called:

1. Component 1 jumps to component 2

// Component 1
this.$router.push({ name: 'number' }, () => {
  console.log('Component 1: onComplete callback');
}, () => {
  console.log('Component 1: onAbort callback');
});

// Component 2
beforeRouteEnter(to, from, next) {
  console.log('Component 2: beforeRouteEnter');
  next();
},
beforeCreate() {
  console.log('Component 2: beforeCreate');
},
created() {
  console.log('Component 2: created');
}

Jumping between components triggers the onComplete callback.

2. Component 2 jumps to component 2 (without parameters)

this.$router.push({ name: 'number'}, () => {
  console.log('Component 2: onComplete callback');
}, () => {
  console.log('Component 2, self-jump: onAbort callback');
});

The component self-jump triggers the onAbort callback when there is no parameter. But when the self-jump takes parameters, the situation may be a little different.

3. Component 2 jumps to component 2 (with parameters)

this.$router.push({ name: 'number', params: { foo: this.number}}, () => {
    console.log('Component 2: onComplete callback');
}, () => {
    console.log('Component 2, self-jump: onAbort callback');
});

The component itself jumps with parameters, and neither the onComplete callback nor the onAbort callback will be triggered.

6. Routing View

Sometimes you want to display multiple views at the same time (at the same level) instead of nesting them. For example, if you want to create a layout with two views, sidebar (side navigation) and main (main content), named views come in handy.

Instead of having a single outlet, you can have multiple individually named views in your interface.

If the router-view is not named, it defaults.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

A view is rendered using a component, so for the same route, multiple views require multiple components.

Make sure you use the components configuration correctly (with an s):

const router = new VueRouter({
routes: [
  {
    path: '/',
    components:
        default: Foo,
        a: Bar,
        b: Baz
    }
    }
  ]
});

7. Redirection

{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: { name: 'foo' }}
{ path: '/a', redirect: to => {
  // Method receives the target route as a parameter // return the redirected string path/path object }}

Note: Navigation guards are not applied to redirect routes, only to their targets.

In the example above, adding a beforeEach or beforeLeave guard to the /a route would have no effect.

8. Decoupling $route with props

Using $route in a component will make it highly coupled to its corresponding route, making the component only usable on certain URLs, limiting its flexibility.

// router file // For routes that contain named views, you must add the `props` option for each named view separately:
{
  path: '/number/:name',
  props: true,
  // Object mode props: { newsletterPopup: false }
  // Function mode props: (route) => ({ query: route.parmas.name })
  name: 'number',
  component: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}

//Component gets export default{
  props: ['name']
}

9. Navigation Guard

1. Three global guards

router.beforeEach global front guard before entering the route.

router.beforeResolve global resolution guard 2.5.0 added. Called after beforeRouteEnter is called.

router.afterEach global post-hook enters the route.

//Entry fileimport router from './router'
 
// Global front guard router.beforeEach((to, from, next) => {
console.log('beforeEach global front guard');
next();
});
// Global resolution guard router.beforeResolve((to, from, next) => {
console.log('beforeResolve global resolution guard');
next();
});
// Global post-guard router.afterEach((to, from) => {
console.log('afterEach global post guard');
});

2. Router exclusive guard

beforeEnter global front guard before entering the route.

{
  path: '/number/:name',
  props: true,
  name: 'number',
  // Routing exclusive guard beforeEnter: (to, from, next) => {
      console.log('beforeEnter route exclusive guard');
      next();
  },
  component: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}

3. Guarding within components

beforeRouteEnter

beforeRouteUpdate (new in 2.2)

beforeRouteLeave

beforeRouteEnter(to, from, next) {
  // Called before the corresponding route that renders this component is confirmed // No! able! Get the component instance `this`
  //Because the component instance has not been created before the guard is executed console.log('beforeRouteEnter component enters guard');
  next();
},
beforeRouteUpdate(to, from, next) {
  // Called when the current route changes but the component is reused // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
  // Since the same Foo component will be rendered, the component instance will be reused. And this hook will be called in this case.
  // You can access the component instance `this`
  console.log('beforeRouteUpdate component update guard');
  next();
},
beforeRouteLeave(to, from, next) {
  // Called when navigating away from the corresponding route of this component // You can access the component instance `this`
  console.log('beforeRouteLeave component leaves the guard');
  next();
}

Component 1 jumps to component 2, and then component 2 jumps to component 2 itself

Component 1 jumps to component 2, then component 2 jumps to component 1

10. Guard next method

next: This method calls the resolve hook.

• next(): Proceed to the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
• next(false): interrupts the current navigation. If the browser URL changes (either manually by the user or by pressing the browser back button), the URL address will be reset to the address corresponding to the from route.
• next('/') or next({ path: '/' }): jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass an arbitrary location object to next, and that allows setting options like replace: true, name: 'home', and any options used in the to prop of router-link or router.push.
• next(error): (2.4.0+) If the argument passed to next is an Error instance, navigation will be aborted and the error will be passed to the callback registered with router.onError().
  

at last

Finally, I hope everyone will read the documents carefully and understand them before using them in the project to avoid bugs. Thank you.

This concludes this article about 10 advanced tips for Vue Router. For more advanced tips on Vue Router, please search 123WORDPRESS.COM for previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!