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
- The second way: I want to keep the scheduled route, I skip
- 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…