仿掘金项目实战之配置子路由 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

上次我们实现了路由跳转，但只是一级路由，相当于我们已经可以实现掘金官网最顶上，首页、沸点、课程等页面的内容加载，但是当我们继续写项目时发现，在首页、课程页等都有综合、关注、后端、前端等二级路由，那二级路由如何实现呢？

首先我们现在App.vue写几个一级路由，方便我们之后实现二级路由；

<nav>
      <router-link to="/home">首页</router-link>
      <router-link to="/hot">沸点</router-link>
      <router-link to="/course">课程</router-link>
      <router-link to="/live">直播</router-link>
    </nav>

    <router-view></router-view>

当我们想在课程页面下添加二级路由我们应该怎么实现呢，首先在src/views的文件夹中新建几个vue文件，里面是我们二级路由跳转需要显示出的内容。

那我们在课程Course.vue中也需要以下结构
    <nav>
      <router-link to="/course">全部</router-link>
      <router-link to="/course/front">前端</router-link>
      <router-link to="/course/end">后端</router-link>
    </nav>

    <router-view></router-view>

<router-view> </router-view>就相当于显示屏，而跳转的vue页面就相当于显示在显示屏上的内容，这样解释会稍微好理解一下，所以在App.vue里也有一个<router-view> </router-view>，其原理与此相同。

二级路由实现的关键还是在/src/router/index.js文件中，也就是说配置路由就是实现路由的关键，无论是一级路由、二级路由甚至是三级路由，都是把需要渲染的vue文件添加在在相应的路由下，实现所需内容的渲染。

我们只需要在课程的一级路由配置中新增一个属性为children在其中也是一个对象，仍然包括二级路由的配置路径、二级路由的名称，以及引入需要渲染的vue文件的路径

这样当我们点击不同的二级路由下面所渲染出的内容都是不同的，当然我们如果想实现三级路由原理也是一样的，我们只需要在二级路由所渲染的那个vue文件中继续新增<nav></nav> <router-view> </router-view>,然后继续在router/index.js中用children套娃可以实现了。