本文已参与「新人创作礼」活动.一起开启掘金创作之路。

九宫格内容的路由跳转的实现

1. 在我们的上一篇文章中实现了九宫格的内容，在我们使用app应用的时候，都知道九宫格点击对应的内容可以跳转到具体的页面中，这次我们就来实现这个功能。
2. 首先，在data中return了一个nav数组，里面的内容是每一个宫格的名字以及跳转路径以及对应的图标内容，创建好了这样的一个数据之后，我们需要在九宫格内使用v-for来渲染他们到页面上去，v-for="(item.index)" :key="index" ,然后在每一个宫格里面绑定一个click事件，用来在methods中定义方法来跳转到具体页面， @click="tiaozhuan(item.path)",这里面传递的参数就是我们data中返回的path参数，是每一个宫格对应的具体页面。在data中我们return的数据具体如下：

 nav: [{
              title: 'XXXXX',
              icon: "../../static/icon/yinyu2.png",
              path: '/pages/xctk/xctk'
            },
            {
              title: 'YYYYYY',
              icon: '../../static/icon/yinyu3.png',
              path: '/pages/dlpp/dlpp'
            },

具体的内容根据自己的需求更改，这里的path路径也不是一定的，要根据自己创建的页面来编写具体的路径，这些跳转的页面都需要自己来创建，然后再在pages.json文件中去配置，具体的配置如下：

如果想要每个创建的页面都有自己的名字，则需要在 "navigationBarTitleText"中配置相应的名字，具体的代码如下：

如果想要页面可以下拉刷新的话，则我们可以在enablePullDownRefresh中将其改为true，这样配置成功后我们的页面就可以跳转了，并且每个页面有自己的名字，下拉刷新根据自己的需求添加配置。

至此，我们的九宫格的跳转功能就完成了。