Have a problem must see official document!

background

The requirement is to do a debugging page, in a single page to obtain all the page routing parameters, want to set the title in the meta of the route, used to set the page alias

Potholes:

Nuxt-route-meta was introduced in nuxt-Route-meta. There is no problem with the introduction of a new project. This plug-in only supports meta and does not support other routing parameters.

The official documentation

There are three types of extensions in the official documentation:

Let’s exclude the second and third

  1. The second way: I want to keep the scheduled route, I skip
  2. The third way:
    • ExtendRoutes, the introduction of external JS files will cause the UI plug-in to introduce exceptions for unknown reasons
    • Writing is not elegant, need separate page maintenance
    • Lazy load writing is difficult to support, so skip

So I chose the first plug-in: @nuxtjs/router-extras

  • This package extends all the routing functionality I wanted
  • It did not break the contracted route
  • Easy to use, just need to configure page routing parameters in each vUE single file

Using the step

1. Installation:

yarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras
Copy the code

2. Configure in nuxt.config.js

If your NUXT version is earlier than 2.9.0, set it like this:

{
  buildModules: [
    // Simple usage
    '@nuxtjs/router-extras',

    // With options
    ['@nuxtjs/router-extras', { /* module options */ }]
  ]
}
Copy the code

Normal use:

{
  buildModules: [
    '@nuxtjs/router-extras'
  ],
  routerExtras: {
    /* module options */
  }
}
Copy the code

3. Vue is used in single files

<template>... </template> <router> {path: '/user' meta: {module: 'user', title: $routing.options. Routes = this.$routing.options. Routes; console.log('%c [ this.routes ]', 'font-size:13px; background:pink; color:#bf2c9f; ', this.routes) } }, </scipte>Copy the code

The only drawback is that hot updates are not supported, and routing configuration changes take effect only after being rebuilt

  • Plugin address github.com/nuxt-commun…