Difference between revisions of "Nuxt.JS Routing"

From WikiOD
 
(One intermediate revision by the same user not shown)
Line 8: Line 8:
 
===== Basic routing =====
 
===== Basic routing =====
 
Suppose the directory structure of pages is as follows:
 
Suppose the directory structure of pages is as follows:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| user/
 
  --| user/
 
  -----| index.vue
 
  -----| index.vue
 
  -----| one.vue
 
  -----| one.vue
  --| index.vue</code>
+
  --| index.vue
 +
</syntaxhighlight>
 
Then, the routing configuration automatically generated by Nuxt.js is as follows:
 
Then, the routing configuration automatically generated by Nuxt.js is as follows:
  
Line 41: Line 43:
  
 
The following directory structure:
 
The following directory structure:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| _slug/
 
  --| _slug/
 
  -----| comments.vue
 
  -----| comments.vue
Line 47: Line 50:
 
  --| users/
 
  --| users/
 
  -----| _id.vue
 
  -----| _id.vue
  --| index.vue</code>
+
  --| index.vue
 +
</syntaxhighlight>
 
The corresponding routing configuration table generated by Nuxt.js is:
 
The corresponding routing configuration table generated by Nuxt.js is:
  <code>router: {
+
  <syntaxhighlight lang="js">
 +
router: {
 
   routes: [
 
   routes: [
 
     {
 
     {
Line 72: Line 77:
 
     }
 
     }
 
   ]
 
   ]
  }</code>
+
  }
 +
</syntaxhighlight>
 
You will find that the route path named users-id has the :id? parameter, indicating that the route is optional. If you want to set it as a required route, you need to create an index.vue file in the users/_id directory.
 
You will find that the route path named users-id has the :id? parameter, indicating that the route is optional. If you want to set it as a required route, you need to create an index.vue file in the users/_id directory.
  
Line 83: Line 89:
  
 
For example: pages/users/_id.vue
 
For example: pages/users/_id.vue
  <code>export default {
+
  <syntaxhighlight lang="js">
 +
export default {
 
   validate ({ params }) {
 
   validate ({ params }) {
 
     // Must be of type number
 
     // Must be of type number
 
     return /^\d+$/.test(params.id)
 
     return /^\d+$/.test(params.id)
 
   }
 
   }
  }</code>
+
  }
 +
</syntaxhighlight>
 
If the value returned by the verification method is not true or resolve in the Promise resolves to false or throws an Error, Nuxt.js will automatically load and display a 404 error page or a 500 error page.
 
If the value returned by the verification method is not true or resolve in the Promise resolves to false or throws an Error, Nuxt.js will automatically load and display a 404 error page or a 500 error page.
  
Line 101: Line 109:
  
 
Suppose the file structure is as follows:
 
Suppose the file structure is as follows:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| users/
 
  --| users/
 
  -----| _id.vue
 
  -----| _id.vue
 
  -----| index.vue
 
  -----| index.vue
  --| users.vue</code>
+
  --| users.vue
 +
</syntaxhighlight>
 
The routing configuration automatically generated by Nuxt.js is as follows:
 
The routing configuration automatically generated by Nuxt.js is as follows:
  <code>router: {
+
  <syntaxhighlight lang="js">
 +
router: {
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki>  {
 
  <nowiki> </nowiki>  {
Line 126: Line 137:
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki> ]
 
  <nowiki> </nowiki> ]
  }</code>
+
  }
  
 +
</syntaxhighlight>
 
=====Dynamic nested routing=====
 
=====Dynamic nested routing=====
 
This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.
 
This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.
  
 
Suppose the file structure is as follows:
 
Suppose the file structure is as follows:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| _category/
 
  --| _category/
 
  -----| _subCategory/
 
  -----| _subCategory/
Line 140: Line 153:
 
  -----| index.vue
 
  -----| index.vue
 
  --| _category.vue
 
  --| _category.vue
  --| index.vue</code>
+
  --| index.vue
 +
</syntaxhighlight>
 
The routing configuration automatically generated by Nuxt.js is as follows:
 
The routing configuration automatically generated by Nuxt.js is as follows:
  <code>router: {
+
  <syntaxhighlight lang="js">
 +
router: {
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki>  {
 
  <nowiki> </nowiki>  {
Line 177: Line 192:
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki> ]
 
  <nowiki> </nowiki> ]
  }</code>
+
  }
  
==Dynamic nested routing==
+
</syntaxhighlight>
 +
=====Dynamic nested routing=====
 
This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.
 
This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.
  
 
Suppose the file structure is as follows:
 
Suppose the file structure is as follows:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| _category/
 
  --| _category/
 
  -----| _subCategory/
 
  -----| _subCategory/
Line 191: Line 208:
 
  -----| index.vue
 
  -----| index.vue
 
  --| _category.vue
 
  --| _category.vue
  --| index.vue</code>
+
  --| index.vue
 +
</syntaxhighlight>
 
The routing configuration automatically generated by Nuxt.js is as follows:
 
The routing configuration automatically generated by Nuxt.js is as follows:
  <code>router: {
+
  <syntaxhighlight lang="js">
 +
router: {
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki> routes: [
 
  <nowiki> </nowiki>  {
 
  <nowiki> </nowiki>  {
Line 228: Line 247:
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki>  }
 
  <nowiki> </nowiki> ]
 
  <nowiki> </nowiki> ]
  }</code>
+
  }
 +
</syntaxhighlight>
  
 
=====Dynamic nested routing with unknown nesting depth=====
 
=====Dynamic nested routing with unknown nesting depth=====
Line 234: Line 254:
  
 
File structure:
 
File structure:
  <code>pages/
+
  <syntaxhighlight lang="js">
 +
pages/
 
  --| people/
 
  --| people/
 
  -----| _id.vue
 
  -----| _id.vue
 
  -----| index.vue
 
  -----| index.vue
 
  --| _.vue
 
  --| _.vue
  --| index.vue</code>
+
  --| index.vue
 +
</syntaxhighlight>
 
Will handle requests like this:
 
Will handle requests like this:
 
{| class="wikitable"
 
{| class="wikitable"
Line 267: Line 289:
 
=====Named view=====
 
=====Named view=====
 
To render named views, you can use the <nuxt name="top"/> or <nuxt-child name="top"/> component in the layout/page. To specify the named view of the page, we need to extend the router configuration in the nuxt.config.js file:
 
To render named views, you can use the <nuxt name="top"/> or <nuxt-child name="top"/> component in the layout/page. To specify the named view of the page, we need to extend the router configuration in the nuxt.config.js file:
  <code>export default {
+
  <syntaxhighlight lang="js">
 +
export default {
 
   router: {
 
   router: {
 
     extendRoutes (routes, resolve) {
 
     extendRoutes (routes, resolve) {
Line 283: Line 306:
 
     }
 
     }
 
   }
 
   }
  }</code>
+
  }
 +
</syntaxhighlight>
 
It needs to extend the route with two attributes components and chunkNames. The named view name in this configuration example is top. Look at an example: [https://www.nuxtjs.cn/examples/named-views named view example].
 
It needs to extend the route with two attributes components and chunkNames. The named view name in this configuration example is top. Look at an example: [https://www.nuxtjs.cn/examples/named-views named view example].
  
Line 290: Line 314:
  
 
We enable it in the nuxt.config.js file:
 
We enable it in the nuxt.config.js file:
  <code>export default {
+
  <syntaxhighlight lang="js">
 +
export default {
 
   generate: {
 
   generate: {
 
     fallback: true, // if you want to use '404.html'
 
     fallback: true, // if you want to use '404.html'
 
     fallback: 'my-fallback/file.html' // if your hosting needs a custom location
 
     fallback: 'my-fallback/file.html' // if your hosting needs a custom location
 
   }
 
   }
  }</code>
+
  }
  
 +
</syntaxhighlight>
 
=====Implemented on Surge=====
 
=====Implemented on Surge=====
 
Surge  [https://surge.sh/help/adding-a-custom-404-not-found-page can handle] 200.html and 404.html, generate. fallback is set to 200.html by default, so there is no need to change it.
 
Surge  [https://surge.sh/help/adding-a-custom-404-not-found-page can handle] 200.html and 404.html, generate. fallback is set to 200.html by default, so there is no need to change it.
Line 306: Line 332:
 
To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration [https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites ( more info )]:
 
To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration [https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites ( more info )]:
  
  <code>To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration ( more info ):{
+
  <syntaxhighlight lang="js">
 +
To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration ( more info ):{
 
   "hosting": {
 
   "hosting": {
 
     "public": "dist",
 
     "public": "dist",
Line 321: Line 348:
 
     ]
 
     ]
 
   }
 
   }
  }</code>
+
  }
 +
</syntaxhighlight>
  
 
=====Transition effect=====
 
=====Transition effect=====
Line 332: Line 360:
  
 
Add the following styles in the global style file assets/main.css:
 
Add the following styles in the global style file assets/main.css:
<code>.page-enter-active, .page-leave-active {
+
<syntaxhighlight lang="js">
 +
.page-enter-active, .page-leave-active {
 
   transition: opacity .5s;
 
   transition: opacity .5s;
 
  }
 
  }
 
  .page-enter, .page-leave-active {
 
  .page-enter, .page-leave-active {
 
   opacity: 0;
 
   opacity: 0;
  }</code>
+
  }
 +
</syntaxhighlight>
 
Then add it to the nuxt.config.js file:
 
Then add it to the nuxt.config.js file:
  <code>module.exports = {
+
  <syntaxhighlight lang="js">
 +
module.exports = {
 
   css: [
 
   css: [
 
     'assets/main.css'
 
     'assets/main.css'
 
   ]
 
   ]
  }</code>
+
  }
 +
</syntaxhighlight>
 
For more information about the transition effect transition property configuration, please refer to the  [https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes page transition effect API].
 
For more information about the transition effect transition property configuration, please refer to the  [https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#extendroutes page transition effect API].
  
Line 350: Line 382:
  
 
Add the following content in the global style assets/main.css:
 
Add the following content in the global style assets/main.css:
  <code>.test-enter-active, .test-leave-active {
+
  <syntaxhighlight lang="js">
 +
.test-enter-active, .test-leave-active {
 
   transition: opacity .5s;
 
   transition: opacity .5s;
 
  }
 
  }
 
  .test-enter, .test-leave-active {
 
  .test-enter, .test-leave-active {
 
   opacity: 0;
 
   opacity: 0;
  }</code>
+
  }
 +
</syntaxhighlight>
 
Then we set the value of the transition property in the page component to test:
 
Then we set the value of the transition property in the page component to test:
  <code>export default {
+
  <syntaxhighlight lang="js">
 +
export default {
 
   transition: 'test'
 
   transition: 'test'
  }</code>
+
  }
 +
</syntaxhighlight>
 
For more information about the transition effect transition property configuration, please refer to the  [https://nuxtjs.org/docs/2.x/components-glossary/pages-transition page transition effect API] .
 
For more information about the transition effect transition property configuration, please refer to the  [https://nuxtjs.org/docs/2.x/components-glossary/pages-transition page transition effect API] .
  
Line 366: Line 402:
  
 
A middleware receives context as the first parameter:
 
A middleware receives context as the first parameter:
<code>export default function (context) {
+
<syntaxhighlight lang="js">
 +
export default function (context) {
 
   context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
 
   context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
  }</code>
+
  }
 +
</syntaxhighlight>
 
Middleware execution flow sequence:
 
Middleware execution flow sequence:
  
Line 378: Line 416:
  
 
middleware/stats.js
 
middleware/stats.js
<code>import axios from 'axios'
 
 
   
 
   
 +
import axios from 'axios'
 +
<syntaxhighlight lang="js">
 
  export default function ({ route }) {
 
  export default function ({ route }) {
 
   return axios.post('<nowiki>http://my-stats-api.com'</nowiki>, {
 
   return axios.post('<nowiki>http://my-stats-api.com'</nowiki>, {
 
     url: route.fullPath
 
     url: route.fullPath
 
   })
 
   })
  }</code>
+
  }
 +
</syntaxhighlight>
 
Then use middleware in your nuxt.config.js, layouts or pages:
 
Then use middleware in your nuxt.config.js, layouts or pages:
  
 
nuxt.config.js
 
nuxt.config.js
<code>module.exports = {
+
<syntaxhighlight lang="js">
 +
module.exports = {
 
   router: {
 
   router: {
 
     middleware: 'stats'
 
     middleware: 'stats'
 
   }
 
   }
  }</code>
+
  }
 +
</syntaxhighlight>
 
Now, the stats middleware will be called every time the route changes.
 
Now, the stats middleware will be called every time the route changes.
  
Line 398: Line 440:
  
 
pages/index.vue or layouts/default.vue
 
pages/index.vue or layouts/default.vue
  <code>export default {
+
  <syntaxhighlight lang="js">
 +
export default {
 
   middleware: 'stats'
 
   middleware: 'stats'
  }</code>
+
  }
 +
</syntaxhighlight>
 
If you want to see a real example of using middleware, please refer to [https://github.com/nuxt/example-auth0 example-auth0] on GitHub.
 
If you want to see a real example of using middleware, please refer to [https://github.com/nuxt/example-auth0 example-auth0] on GitHub.
  
 
[[category:Nuxt.js Tutorials|5]]
 
[[category:Nuxt.js Tutorials|5]]

Latest revision as of 15:15, 24 August 2021

Nuxt.js automatically generates the routing configuration of the vue-router module based on the pages directory structure.

To use routing between pages, we recommend using the <nuxt-link>  tag.

For example:

   <nuxt-link to="/">Home</nuxt-link>
Basic routing[edit | edit source]

Suppose the directory structure of pages is as follows:

pages/
 --| user/
 -----| index.vue
 -----| one.vue
 --| index.vue

Then, the routing configuration automatically generated by Nuxt.js is as follows:

router: {
    routes: [
      {
        name: 'index',
        path: '/',
        component: 'pages/index.vue'
      },
      {
        name: 'user',
        path: '/user',
        component: 'pages/user/index.vue'
      },
      {
        name: 'user-one',
        path: '/user/one',
        component: 'pages/user/one.vue'
      }
    ]
  }
Dynamic routing[edit | edit source]

To define a dynamic route with parameters in Nuxt.js, you need to create a Vue file or directory with the corresponding underscore as the prefix.

The following directory structure:

pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue

The corresponding routing configuration table generated by Nuxt.js is:

router: {
   routes: [
     {
       name: 'index',
       path: '/',
       component: 'pages/index.vue'
     },
     {
       name: 'users-id',
       path: '/users/:id?',
       component: 'pages/users/_id.vue'
     },
     {
       name: 'slug',
       path: '/:slug',
       component: 'pages/_slug/index.vue'
     },
     {
       name: 'slug-comments',
       path: '/:slug/comments',
       component: 'pages/_slug/comments.vue'
     }
   ]
 }

You will find that the route path named users-id has the :id? parameter, indicating that the route is optional. If you want to set it as a required route, you need to create an index.vue file in the users/_id directory.

:API Configuration generate

Warning: The generate command ignores dynamic routing:  API Configuration generate

Routing parameter verification[edit | edit source]

Nuxt.js allows you to define parameter verification methods in dynamic routing components.

For example: pages/users/_id.vue

export default {
   validate ({ params }) {
     // Must be of type number
     return /^\d+$/.test(params.id)
   }
 }

If the value returned by the verification method is not true or resolve in the Promise resolves to false or throws an Error, Nuxt.js will automatically load and display a 404 error page or a 500 error page.

For information about routing parameter verification, please refer to  page verification API .

Nested routing[edit | edit source]

You can create nested routes for Nuxt.js applications through sub-routes of vue-router.

To create an embedded sub-route, you need to add a Vue file and a directory with the same name as the file to store the sub-view components.

Warning: Don't forget to add <nuxt-child/> to the parent component (.vue file) to display the content of the child view.

Suppose the file structure is as follows:

pages/
 --| users/
 -----| _id.vue
 -----| index.vue
 --| users.vue

The routing configuration automatically generated by Nuxt.js is as follows:

router: {
 <nowiki> </nowiki> routes: [
 <nowiki> </nowiki>   {
 <nowiki> </nowiki>     path: '/users',
 <nowiki> </nowiki>     component: 'pages/users.vue',
 <nowiki> </nowiki>     children: [
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: <nowiki>''</nowiki>,
 <nowiki> </nowiki>         component: 'pages/users/index.vue',
 <nowiki> </nowiki>         name: 'users'
 <nowiki> </nowiki>       },
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: ':id',
 <nowiki> </nowiki>         component: 'pages/users/_id.vue',
 <nowiki> </nowiki>         name: 'users-id'
 <nowiki> </nowiki>       }
 <nowiki> </nowiki>     ]
 <nowiki> </nowiki>   }
 <nowiki> </nowiki> ]
 }
Dynamic nested routing[edit | edit source]

This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.

Suppose the file structure is as follows:

pages/
 --| _category/
 -----| _subCategory/
 --------| _id.vue
 --------| index.vue
 -----| _subCategory.vue
 -----| index.vue
 --| _category.vue
 --| index.vue

The routing configuration automatically generated by Nuxt.js is as follows:

router: {
 <nowiki> </nowiki> routes: [
 <nowiki> </nowiki>   {
 <nowiki> </nowiki>     path: '/',
 <nowiki> </nowiki>     component: 'pages/index.vue',
 <nowiki> </nowiki>     name: 'index'
 <nowiki> </nowiki>   },
 <nowiki> </nowiki>   {
 <nowiki> </nowiki>     path: '/:category',
 <nowiki> </nowiki>     component: 'pages/_category.vue',
 <nowiki> </nowiki>     children: [
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: <nowiki>''</nowiki>,
 <nowiki> </nowiki>         component: 'pages/_category/index.vue',
 <nowiki> </nowiki>         name: 'category'
 <nowiki> </nowiki>       },
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: ':subCategory',
 <nowiki> </nowiki>         component: 'pages/_category/_subCategory.vue',
 <nowiki> </nowiki>         children: [
 <nowiki> </nowiki>           {
 <nowiki> </nowiki>             path: <nowiki>''</nowiki>,
 <nowiki> </nowiki>             component: 'pages/_category/_subCategory/index.vue',
 <nowiki> </nowiki>             name: 'category-subCategory'
 <nowiki> </nowiki>           },
 <nowiki> </nowiki>           {
 <nowiki> </nowiki>             path: ':id',
 <nowiki> </nowiki>             component: 'pages/_category/_subCategory/_id.vue',
 <nowiki> </nowiki>             name: 'category-subCategory-id'
 <nowiki> </nowiki>           }
 <nowiki> </nowiki>         ]
 <nowiki> </nowiki>       }
 <nowiki> </nowiki>     ]
 <nowiki> </nowiki>   }
 <nowiki> </nowiki> ]
 }
Dynamic nested routing[edit | edit source]

This application scenario is relatively rare, but Nuxt.js still supports: Configure dynamic sub-routes under dynamic routing.

Suppose the file structure is as follows:

pages/
 --| _category/
 -----| _subCategory/
 --------| _id.vue
 --------| index.vue
 -----| _subCategory.vue
 -----| index.vue
 --| _category.vue
 --| index.vue

The routing configuration automatically generated by Nuxt.js is as follows:

router: {
 <nowiki> </nowiki> routes: [
 <nowiki> </nowiki>   {
 <nowiki> </nowiki>     path: '/',
 <nowiki> </nowiki>     component: 'pages/index.vue',
 <nowiki> </nowiki>     name: 'index'
 <nowiki> </nowiki>   },
 <nowiki> </nowiki>   {
 <nowiki> </nowiki>     path: '/:category',
 <nowiki> </nowiki>     component: 'pages/_category.vue',
 <nowiki> </nowiki>     children: [
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: <nowiki>''</nowiki>,
 <nowiki> </nowiki>         component: 'pages/_category/index.vue',
 <nowiki> </nowiki>         name: 'category'
 <nowiki> </nowiki>       },
 <nowiki> </nowiki>       {
 <nowiki> </nowiki>         path: ':subCategory',
 <nowiki> </nowiki>         component: 'pages/_category/_subCategory.vue',
 <nowiki> </nowiki>         children: [
 <nowiki> </nowiki>           {
 <nowiki> </nowiki>             path: <nowiki>''</nowiki>,
 <nowiki> </nowiki>             component: 'pages/_category/_subCategory/index.vue',
 <nowiki> </nowiki>             name: 'category-subCategory'
 <nowiki> </nowiki>           },
 <nowiki> </nowiki>           {
 <nowiki> </nowiki>             path: ':id',
 <nowiki> </nowiki>             component: 'pages/_category/_subCategory/_id.vue',
 <nowiki> </nowiki>             name: 'category-subCategory-id'
 <nowiki> </nowiki>           }
 <nowiki> </nowiki>         ]
 <nowiki> </nowiki>       }
 <nowiki> </nowiki>     ]
 <nowiki> </nowiki>   }
 <nowiki> </nowiki> ]
 }
Dynamic nested routing with unknown nesting depth[edit | edit source]

If you don't know the depth of the URL structure, you can use _.vue to dynamically match nested paths. This will handle the case of a mismatch with a more specific request.

File structure:

pages/
 --| people/
 -----| _id.vue
 -----| index.vue
 --| _.vue
 --| index.vue

Will handle requests like this:

Path File
/ index.vue
/people people/index.vue
/people/123 people/_id.vue
/about _.vue
/about/careers _.vue
/about/careers/chicago _.vue

Note: Processing the 404 pages now conforms to the logic of the _.vue page. For more information about 404 redirects, click here .

Named view[edit | edit source]

To render named views, you can use the <nuxt name="top"/> or <nuxt-child name="top"/> component in the layout/page. To specify the named view of the page, we need to extend the router configuration in the nuxt.config.js file:

export default {
   router: {
     extendRoutes (routes, resolve) {
       const index = routes.findIndex(route => route.name === 'main')
       routes[index] = {
         ...routes[index],
         components: {
           default: routes[index].component,
           top: resolve(__dirname, 'components/mainTop.vue')
         },
         chunkNames: {
           top: 'components/mainTop'
         }
       }
     }
   }
 }

It needs to extend the route with two attributes components and chunkNames. The named view name in this configuration example is top. Look at an example: named view example.

SPA fallback[edit | edit source]

You can also enable SPA fallback for dynamic routing. When using mode:'spa' mode, Nuxt.js will output an additional file the same as index.html. If no files match, most static hosting services can be configured to use SPA templates. The generated file does not contain header information or any HTML, but it will still parse and load the data in the API.

We enable it in the nuxt.config.js file:

export default {
   generate: {
     fallback: true, // if you want to use '404.html'
     fallback: 'my-fallback/file.html' // if your hosting needs a custom location
   }
 }
Implemented on Surge[edit | edit source]

Surge  can handle 200.html and 404.html, generate. fallback is set to 200.html by default, so there is no need to change it.

Implemented on GitHub Pages and Netlify[edit | edit source]

GitHub Pages and Netlify automatically recognize the 404.html file, so all we need to do is set generate. fallback to true!

Implemented on Firebase Hosting[edit | edit source]

To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration ( more info ):

To use it on Firebase Hosting, configure generate.fallback to true and use the following configuration ( more info ):{
   "hosting": {
     "public": "dist",
     "ignore": [
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
     ],
     "rewrites": [
       {
         "source": "**",
         "destination": "/404.html"
       }
     ]
   }
 }
Transition effect[edit | edit source]

Nuxt.js uses the <transition> component of Vue.js to realize the transition effect when switching routes.

Global transition animation settings[edit | edit source]

Tip: The transition effect name used by Nuxt.js by default is page

If we want to make every page switch have a fade effect, we need to create a CSS file common to all routes. So we can create this file in the assets/ directory:

Add the following styles in the global style file assets/main.css:

.page-enter-active, .page-leave-active {
   transition: opacity .5s;
 }
 .page-enter, .page-leave-active {
   opacity: 0;
 }

Then add it to the nuxt.config.js file:

module.exports = {
   css: [
     'assets/main.css'
   ]
 }

For more information about the transition effect transition property configuration, please refer to the  page transition effect API.

Page transition animation settings[edit | edit source]

If you want to customize transition effects for a certain page, just configure the transition field in the page component:

Add the following content in the global style assets/main.css:

.test-enter-active, .test-leave-active {
   transition: opacity .5s;
 }
 .test-enter, .test-leave-active {
   opacity: 0;
 }

Then we set the value of the transition property in the page component to test:

export default {
   transition: 'test'
 }

For more information about the transition effect transition property configuration, please refer to the  page transition effect API .

Middleware[edit | edit source]

Middleware allows you to define a custom function to run on a page or group of pages before rendering.

Each middleware should be placed in the middleware/ directory. The name of the file name will become the middleware name (middleware/auth.js will become the auth middleware).

A middleware receives context as the first parameter:

export default function (context) {
   context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
 }

Middleware execution flow sequence:

  1. nuxt.config.js
  2. Match layout
  3. Match page

Middleware can be executed asynchronously, just return a Promise or use the second callback as the first parameter:

middleware/stats.js

import axios from 'axios'

 export default function ({ route }) {
   return axios.post('<nowiki>http://my-stats-api.com'</nowiki>, {
     url: route.fullPath
   })
 }

Then use middleware in your nuxt.config.js, layouts or pages:

nuxt.config.js

module.exports = {
   router: {
     middleware: 'stats'
   }
 }

Now, the stats middleware will be called every time the route changes.

You can also add middleware to the specified layout or page:

pages/index.vue or layouts/default.vue

export default {
   middleware: 'stats'
 }

If you want to see a real example of using middleware, please refer to example-auth0 on GitHub.