Extra add-ons for Nuxt router
@nuxtjs/router-extras
dependency to your projectyarn add --dev @nuxtjs/router-extras # or npm install --save-dev @nuxtjs/router-extras
@nuxtjs/router-extras
to the buildModules
section of nuxt.config.js
⚠️ If you are using Nuxt < 2.9.0
, use modules
instead.
{
buildModules: [
// Simple usage
'@nuxtjs/router-extras',
// With options
['@nuxtjs/router-extras', { /* module options */ }]
]
}
{
buildModules: [
'@nuxtjs/router-extras'
],
routerExtras: {
/* module options */
}
}
routerNativeAlias
true
Simple aliases will be added as router alias, see vue-router
Simply add a block inside Vue file and define a path in JavaScript or Yaml
JavaScript
<router>
{
path: '/posts'
}
</router>
Yaml
<router>
path: /posts
</router>
If you want more paths for a single page, define them with aliases
JavaScript
<router>
{
path: '/posts',
alias: [
'/articles',
'/blog'
]
}
</router>
Yaml
<router>
path: /posts
alias:
- /articles
- /blog
</router>
Aliases can have their own props
JavaScript
<router>
{
path: '/posts',
alias: [
'/articles',
{
path: '/blog',
props: {
section: 'top-posts'
}
}
]
}
</router>
Yaml
<router>
path: /posts
alias:
- /articles
-
path: /blog
props:
section: top-posts
</router>
JavaScript
<router>
{
path: '/post/:id/:title?'
}
</router>
Yaml
<router>
path: /post/:id/:title?
</router>
JavaScript
<router>
{
namedViews: {
currentView: 'main',
views: {
side: '~/components/side.vue'
},
chunkNames: {
side: 'components/side'
}
}
}
</router>
Yaml
<router>
namedViews:
currentView: "main"
views:
side: "~/components/side.vue"
chunkNames:
side: "~/components/side.vue"
</router>
Extras | Support | Description |
---|---|---|
path |
JS & YAML | Change page URL |
alias |
JS & YAML | Add single or multiple aliases to page, Module supports two types of aliases |
routerNativeAlias
is true, simple aliases will be added as router alias, see vue-router docsmeta
| JS & YAML | Add Meta information to the page, meta can be used by middlewares |name
| JS & YAML | Define custom name for route |props
| JS & YAML | Pass predefined props to page |beforeEnter
| JS | Define beforeEnter
guard for this route, see: Global Before Guards |caseSensitive
| JS & YAML | Use case sensitive route match (default: false) |redirect
| JS & YAML | Redirect current page to new location |namedViews
| JS & YAML | Add named view to the path, see Named Views Support |There is support for named views in nuxt, but it requires the user to write a lot of boilerplate code in the config. The namedViews
property in the <router>
block allows for a more streamlined configuration
Named views key is a bit different from all other settings. It expects an object with following properties:
currentView
: actual view name for the current component. Defaults to "default"
, to be rendered in plain <nuxt-child />
views
: object, where keys are view names and values are component paths. It supports all expected path resolution (~/
and others)chunkNames
: object, where keys are view names and values are webpack chunks for them. Object structure is expected to be equal to views
- all the same keys must be present.For usage example see example/pages/namedParent.vue
and example/pages/namedParent/namedChild.vue
.
Install Vetur extension and define custom block
<router>
to vetur.grammar.customBlocks
in VSCode settings"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json",
"router": "js"
}
> Vetur: Generate grammar from vetur.grammar.customBlocks
in VSCodeyarn install
or npm install
npm run dev
Author: nuxt-community
Demo: https://codesandbox.io/s/github/nuxt-community/router-extras-module
Source Code: https://github.com/nuxt-community/router-extras-module
#vue #vuejs #nuxtjs #javascript