This is the fifth day of my participation in the August Wen Challenge.More challenges in August

This paper mainly introduces routing aspects of vUE back-end rendering (SSR) project based on NuxtJS. If you have any inadequacies or suggestions, you are welcome to correct them

Reductive route

Nuxt does not need to configure routing separately through steps such as new Router({}) as normal VUE projects do. Instead, nuxT uses reductive routing. All pages that need to be routed are placed in the Pages directory. Nuxt automatically generates the route configuration for the VUe-Router module based on the Pages directory structure. Pages require a layout that defines how the page should be laid out. By default, it uses the default.vue file automatically generated during project construction in the Layouts directory, which contains a
tag. Equivalent to
in vue.

If you have a different layout, create a new Vue file in the layouts directory. For example, in this project, I had a “Personal Center” section with a different header and tail from other pages, so I created a new user.vue file. Here is an example of the template parts of default.vue and user.vue:

<! -- default.vue -->
<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>
Copy the code

The default layout is composed of three parts: the top, middle and bottom of the page header, the page body and the page tail. $nuxt.isOffline is used to check network outage.

<! -- user.vue -->
<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <! Top navigation bar -->
    <Shortcut />
    <UserHeader />
    <div class="main-content flex-ai_fs m-t_20">
      <! -- Sidebar menu -->
      <UserNavMenu style="margin-right: 20px" />
      <nuxt />
    </div>
  </div>
</template>
Copy the code

The personal center page will have a narrow top navigation bar, then the main body will be left and right, the left side will have a sidebar menu, and then the right
will hold the personal center page written in the Pages directory.

Note: Content written inside a layout page in the layouts directory can be split into multiple components, such as a separate navigation component called header. vue.

Declarative jump

In layouts/default.vue, you can use the

tag to jump to a page declaratively, similar to the

in vue. For example, if you need to click the logo in the header of the page to jump to the home page, just write /index in the to attribute of

:


<nuxt-link active-class="c-blue" to="/index">
  <el-image
    style="width: 108px; height: 37px"
    src="/imgs/logo.png"
    fit="cover"
  />
</nuxt-link>
Copy the code

Secondary pages

A new directory in the pages directory, such as goods, in the catalogue of goods under the new _id. Vue, working in goods. The vue, also can add < nuxt / > as exhibit of child pages, with the < nuxt – link “page jump > :

<template>
  <div>
    <h2>goods</h2>
    <nuxt-link to="/goods/1? a=1">Item 1</nuxt-link>
    <nuxt-link :to="{name: 'goods-id', params: {id: 2}, query: {a: 2}}">2 goods</nuxt-link>  
    <nuxt /> 
  </div>
</template>
Copy the code

Matters needing attention:

  1. Secondary pages need to be placed in a new folder
  2. Dynamic routes with parameters can be defined, but the file name must start with an _, such as _id. Vue, where the ID changes dynamically
  3. <nuxt-link> 中 toThe value of can be writable or an object that can pass arguments dynamically, as in line 5 of the above example. Among them,name 的 valueIs “directory name-next-level directory name (if any) -filename”, where “_” is removed from the filename,paramsThe key of the object is the file name, also without “_”, and the value is the parameter to be passed.
  4. <nuxt-link to="/goods/1? a=1">The parameters in theidThe value of the1Is a string, and<nuxt-link :to="{name: 'goods-id', params: {id: 2}, query: {a: 2}}">In theidThe value of the2The number is.

Display area level

To illustrate this, we simply created two levels of pages: index.vue, goods.vue, and login.vue, all of which are level 1 files in the Pages directory; The second level is the goods directory’s id.vue. The directory structure is shown below:



In default.vue in the layouts directory<nuxt />The corresponding area is in the blue box below, in goods.vue<nuxt />The corresponding area is the red box in the following figure:



What if we want the second-level page (red box) to take up the entire first-level display area (blue box)?

  1. Create a new index.vue under the goods directory and copy in the contents of goods.vue
  2. Delete will goods. Vue

In this way, product details will cover the whole level 1 exhibition area, as shown below:



In other words, in an index.vue directory<nuxt />The display area of the function pane is the same as that of the previous function pane.

Extend the routing

In addition to contracted routing, we can configure the routing ourselves as a normal VUE project.

demand

We need to change the link text of the current page to blue: we can add active-class to set the CSS class name to use when the link is activated.

<nuxt-link active-class="c-blue" to="/">Home page</nuxt-link>
<nuxt-link active-class="c-blue" to="/login">The login</nuxt-link>
<nuxt-link active-class="c-blue" to="/goods">goods</nuxt-link>
Copy the code

There is a problem with this setting: / points to the home page, but there is a path for both the login page and the products page /, so the current page is either page, the home page link will be blue:

Solution: Configure the extended route

In the nuxt.config.js file, locate the Router object and configure it as follows:

router: { 
  // Extend the route
  extendRoutes(routes, resolve) { 
    routes.push({ 
      name: 'index'.path: '/index'.component: resolve(__dirname, 'pages/index.vue')}}}Copy the code

Among them:

  1. resolveAnd in the nodepath.resolveIn theresolveSimilar, used to convert a relative path to an absolute path.
  2. __dirname is used to get the full directory name of the directory (project directory) where the current execution file (nuxt.config.js) is located.


Parameter calibration

Route parameters can be verified during the validate life cycle. For example, route Settings for the jump to the commodity detail page can not be set when id is 2. We can define the route parameters in the goods directory.

export default { 
  validate({ params }) { 
    const { id } = params
    if (id === '1') { 
      return true 
    } else if (id === 2) {
      return fase 
    } 
  } 
}
Copy the code

When you click on the link to Item 2, a default error page for NuxT is displayed.