Introducing Routing in Nuxt.js

Hello friends. Today I will introduce you to a new framework that is Nuxtjs. Specifically, I will introduce you to the Routing of NuxtJs.

Introduce a little bit about Nuxt.js It is a framework used to build applications from Vue.js Nuxt.js was released on October 25, 2016 by zeit.co. If anyone is already working with Reactjs and probably knows Next.js , this Nuxt.js is almost the same.

Now I started to enter the main owner of the Routing offline.

• Basic Routes
• Nested Routes
• Named Views
• Prevention of SPA
  • Made for Surge
  • Deploying the GitHub page and Netlify
  • Deploy for Firebase Hosting
• Forward
  • General settings
  • Page settings
• Middleware

Basic Routes

File path:

It will automatically generate the Router:

Nested Routes

Nuxt.js allows you to create nested routes using sub-routes of vue-router.

To determine the parent component of nested routes, you need to create the Vue file with the same name as the folder containing the sub containers.

File path:

It will automatically generate the Router:

Named Views

To display named views, you can use the <nuxt name="top"/> or <nuxt-child name="top"/> in your layout / page. To specify the named view of the page, expand the router configuration in the nuxt.config.js file:

It requires expanding the router with 2 components and chunkNames .

For a more specific understanding, see the example-view example .

Prevention of SPA

You can also enable redundant SPA for the route. Nuxt.js will output an additional file like index.html will be used in mode: 'spa' . Most storage services can be configured to use SPA if no files match. It will not include the information head or any HTML, but it will still resolve and load data from the API.

You can enable this feature in the nuxt.config.js file:

Made for Surge

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

Deploying the GitHub page and Netlify

The GitHub and Netlify pages automatically recognize the 404.html file, so what we have to do is just set generate.fallback to true .

Deploy for Firebase Hosting.

To use backup on Firebase Hosting, you need to configure generate.fallback to true and use the following configuration ( for more details ):

Forward

Nuxt.js uses the <transition> component to allow creating transitions / animations between your routes.

General settings

To add a fading transition to each page in your application, a shared CSS file is needed on all routes, so start by creating a file in the assets folder.

css is written in assets/main.css :

After that, we add its path to css in the nuxt.config.js file:

Page settings

You can also define custom conversions for a specific page with the transition attribute.

We add a new class and write css in assets/main.css :

Then we will use the conversion property to determine the class name that will be used for this page conversion process:

Middleware

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

Middleware will be done in order:

1. nuxt.config.js (in order of file)
2. Matching layouts
3. Suitable page

A middleware may be out of sync. To do this, simply return a Promise or use the second callback :

middleware/stats.js

Then, in nuxt.config.js , use the router.middleware lock:

nuxt.config.js

The status of the middleware will now be called for each route change.

You can also add your middleware to a specific layout or page:

pages/index.vue or layouts/default.vue

Below I have introduced you to Nuxt.js as well as basic concepts and examples of Routing in Nuxt.js n. If you have any questions, please leave a comment below.

Refer

https://nuxtjs.org/guide/routing#named-views