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.