VueRouter——命名路由-嵌套路由-重定向（二）

前言

本章介紹路由的三個相關知識點，如標題。路由是開發中很重要的一環，學習路由不只要能讀懂路由，還要寫清楚路由。這樣一來不管是將來維護別人的代碼，或者別人維護你的代碼，都可以更加便利。

1.命名路由

router.js：

{
  path: '/new',
  name: 'new',
  component: () => import("../components/new.vue")
},

app.vue：

<router-link :to="{ name: 'new' }">最新發布</router-link>

效果：

2.嵌套路由

什麼意思呢？往下看：

router.js：

{
  path: '/hy',
  component: () => import("../components/hy.vue"),
  children: [
    {
      path: '/hy/jd',
      component: () => import("../components/hy/jd.vue"),
    },
    {
      path: '/hy/sn',
      component: () => import("../components/hy/sn.vue"),
    },
    {
      path: '/hy/hp',
      component: () => import("../components/hy/hp"),
    },
  ]
},

hy.vue：

<template>
  <div class="hy">
    <div class="left-nav">
      <router-link to="/hy/jd" tag="li">鯨蹲</router-link>
      <router-link to="/hy/sn" tag="li">酥檸</router-link>
      <router-link to="/hy/hp" tag="li">燴葡</router-link>
    </div>
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>

看效果：

捎帶一個小知識點：子路由路徑能夠簡寫，代碼以下：

{
  path: '/hy',
  component: () => import("../components/hy.vue"),
  children: [
    {
      path: 'jd',
      component: () => import("../components/hy/jd.vue"),
    },
    {
      path: 'sn',
      component: () => import("../components/hy/sn.vue"),
    },
    {
      path: 'hp',
      component: () => import("../components/hy/hp"),
    },
  ]
},

可是簡寫的時候也有須要注意的點，原理上咱們只要把父級路徑的重複部分刪除便可，即寫做（這裏是錯誤實例）：

{
  path: '/hy',
  component: () => import("../components/hy.vue"),
  children: [
    {
      path: '/jd',
      component: () => import("../components/hy/jd.vue"),
    },
  ]
},

但因爲'/'表示的是根路徑，因此查找的時候會在根路徑下找，而不是在'/hy'的子級找。

3.重定向

子路由配置完成以後，切換路由到父級，此時會發現<router-view />並不會被渲染出來。由於這時的路徑並不在子路由上。重現：

因此這時須要咱們添加一個默認展現的路徑，首先新插入一個子路由，並將路徑設置爲空，將加載的組件設置爲想要展現的默認組件：

{
  path: '/hy',
  component: () => import("../components/hy.vue"),
  children: [
    {
      path: '',
      component: () => import("../components/hy/jd.vue"),
    },
    {
      path: 'jd',
      component: () => import("../components/hy/jd.vue"),
    },
  ]
},

效果以下：

可是這樣的寫法很莫名其妙，甚至有些滑稽。爲何要配置這樣一個子路由呢？而後繼續改造：

{
  path: '/hy',
  component: () => import("../components/hy.vue"),
  redirect: '/hy/jd',
  children: [
    // {
    //   path: '',
    //   component: () => import("../components/hy/jd.vue"),
    // },
    {
      path: 'jd',
      component: () => import("../components/hy/jd.vue"),
    },
  ]
},

redirect（重定向），將它的值設爲帶有父級路徑的完整路徑，即'/hy/jd'的形式，而後就能夠看到地址欄路徑的變化：

4.總結

命名路由使用與path很長的一些值的匹配，例如：

<router-link to="/asd/qwekjn/asdlkj/kajsn"></router-link>

這樣的代碼不只很差看，也很差維護，因此須要給這個路由起個名字，一個蘿蔔一個坑，拿各自的名字去找既簡潔又方便

<router-link :to="{ name: 'routerName'}"></router-link>

嵌套路由在單頁面應用中幾乎隨處可見，因此嵌套路由也是開發的必備，不只要能讀懂也要寫的明白。而重定向就相對簡單也容易理解，它還能夠寫成對象或者函數的形式，但我以爲直接寫路徑反而更清晰一些，因此不作過多介紹了。

後面還會有路由相關的知識，寫這些文章，分享是一方面，學習也是一方面，我也須要溫故知新，須要在寫文章的過程當中發現本身的缺陷和問題。若是文章中有錯誤的或者不清晰等等問題，還但願可以指出。

---

Keep foolish, keep hungry.