This is my participation 8 The fourth of the yuegengwen challenge 5 God , Check out the activity details ：8 Yuegengwen challenge

This article is mainly based on NuxtJS Built vue Render Back-End （SSR） Introduction to the road in the project . There are deficiencies or any suggestions , Welcome you guys to straighten ~

Conventional routing

nuxt No need to be like the general vue Project like that , adopt new Router({}) Steps such as configuring the route separately , Instead, a conventional route is used , All pages that need route jump , Just put it in pages Under the directory ,nuxt Will be based on pages The directory structure is automatically generated vue-router Routing configuration of the module . stay pages All pages in the need to define a layout, To specify how the page is laid out , By default , Is to use layouts Directory, which is automatically generated when building a project default.vue file , There's a <nuxt /> label , amount to vue Medium <router-view />.

If there is a different layout , Can be in layouts New under the directory vue file . For example, in this project , There is one “ Personal center ” plate , The beginning and end of the page are different from other pages , I just built a new user.vue file . Let's put them separately default.vue and user.vue Of template Part, for example ：

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

The default layout is the top, middle and bottom page headers , Page body and page footer 3 Part of it is made up of .
P.S. $nuxt.isOffline It is used for network disconnection detection .

<!-- 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 code 

The personal center page will have a narrow top navigation bar , Then the main part is the left and right structure , There is a sidebar menu on the left , And then the one on the right <nuxt /> Write on pages The page of the personal center under the directory .

Be careful ： Written in layouts The contents of the layout page under the directory can be divided into multiple components , For example, the navigation part is defined as Header.vue Component re introduction .

Declarative jump

stay layouts / default.vue in , It can be used <nuxt-link> Tag declarative jump page , amount to vue Medium <router-link>. For example, the header of the page logo, You need to click to jump to the home page , Just in <nuxt-link> Of to Write... In the attribute /index that will do ：

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

Secondary page

stay pages New directory under directory , such as goods, stay goods New under the directory _id.vue, It's in goods.vue in , You can also add <nuxt /> As a display area for sub pages , use <nuxt-link"> Page Jump ：

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

matters needing attention ：

1. The secondary page needs to be placed in a new folder
2. Dynamic routing with parameters can be defined , But the file name must start with _ start , Such as _id.vue,id It's dynamic
3. <nuxt-link> in to The value of can be written dead , It can also be an object , Parameters can be passed dynamically , As in the above example, No 5 Line code . among ,name Of value by “ Directory name - Next level directory name （ If there is a next level ）- file name ”, The file name here should be removed "_",params Object's key Is the file name , Also don't bring "_", value Is the parameter to be passed .
4. <nuxt-link to="/goods/1?a=1"> Parameters in id Value 1 Is string , and <nuxt-link :to="{name: 'goods-id', params: {id: 2}, query: {a: 2}}"> Medium id Value 2 It's the number. .

Display area level

To illustrate the point , We simply created 2 Level page ： The first level is index.vue、goods.vue and login.vue, They are all in pages The first level file in the directory ; The second level is goods In the catalog _id.vue.
The directory structure is shown in the figure below ：

stay layouts In the catalog default.vue Medium <nuxt /> The corresponding is the blue box area in the figure below , stay goods.vue Medium <nuxt /> The corresponding area is the red box area in the figure below ：

If we want a second level page （ Red box ） Occupy the whole primary display area （ Blue box ） Well ？

1. stay goods New under the directory index.vue, take goods.vue Copy in the content of
2. take goods.vue Delete

In this way, the product details will be covered in the whole primary exhibition area , Here's the picture ：

in other words , Under a certain directory index.vue Internal <nuxt /> The display area of the exhibition area is the same as that of the first level .

Extended Routing

In addition to conventional routing , We can also be like vue Configure your own routing as a project .

demand

You need to change the link text of the current page to blue ： We can add active-class To set the... Used when the link is activated CSS Class name .

<nuxt-link active-class="c-blue" to="/"> home page </nuxt-link>
<nuxt-link active-class="c-blue" to="/login"> Sign in </nuxt-link>
<nuxt-link active-class="c-blue" to="/goods"> goods </nuxt-link>
 Copy code 

There will be a problem with the above settings ：/ Point to the home page , There are paths to both the login page and the product page /, So the current page is any page , Home page links will be blue ：

solve ： Configure extended routing

stay nuxt.config.js In the file , find router object , Configure as follows ：

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

among ：

1. resolve And node Inside path.resolve Medium resolve almost , Used to convert a relative path to an absolute path .
2. __dirname Used to obtain the current execution file （nuxt.config.js） In the directory （ Project directory ） Full directory name of .

such , We can change the path of the home page from the original / Change to /index, That is, write the link as <nuxt-link active-class="c-blue" to="/index"> home page </nuxt-link>

Parameter checking

Can be in validate Check the routing parameters in this life cycle , For example, the route setting for the jump of the previous product details page , Suppose the demand is id by 2 You cannot jump to the product details page , We can do it in goods In the catalog _id.vue Page definition ：

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

When you click to go to the product 2 When linking , Will show a nuxt Default error page .