taro之--路由与tabbar

路由与 Tabbar

在 src/components/thread 组件中，我们通过

Taro.navigateTo({ url: '/pages/thread_detail/thread_detail' })

跳转到帖子详情，但这个页面仍未实现，现在我们去入口文件配置一个新的页面：

src/app.config.js

export default {
  pages: ['pages/index/index', 'pages/thread_detail/thread_detail'],
}

然后在路径 src/pages/thread_detail/thread_detail 实现帖子详情页面，路由就可以跳转，我们整个流程就跑起来了：

• React

• Vue

src/pages/thread_detail/thread_detail.vue

到目前为止，我们已经实现了这个应用的所有逻辑，除去「节点列表」页面（在进阶指南我们会讨论这个页面组件）之外，剩下的页面都可以通过我们已经讲解过的组件或页面快速抽象完成。按照我们的计划，这个应用会有五个页面，分别是：

1. 首页，展示最新帖子（已完成）

2. 节点列表

3. 热门帖子（可通过组件复用）

4. 节点帖子 （可通过组件复用）

5. 帖子详情 （已完成）

其中前三个页面我们可以把它们规划在 tabBar 里，tabBar 是 Taro 内置的导航栏，可以在 app.config.js 配置，配置完成之后处于的 tabBar 位置的页面会显示一个导航栏。最终我们的 app.config.js 会是这样：

app.config.js

xport default {
  pages: [
    'pages/index/index',
    'pages/nodes/nodes',
    'pages/hot/hot',
    'pages/node_detail/node_detail',
    'pages/thread_detail/thread_detail',
  ],
  tabBar: {
    list: [
      {
        iconPath: 'resource/latest.png',
        selectedIconPath: 'resource/lastest_on.png',
        pagePath: 'pages/index/index',
        text: '最新',
      },
      {
        iconPath: 'resource/hotest.png',
        selectedIconPath: 'resource/hotest_on.png',
        pagePath: 'pages/hot/hot',
        text: '热门',
      },
      {
        iconPath: 'resource/node.png',
        selectedIconPath: 'resource/node_on.png',
        pagePath: 'pages/nodes/nodes',
        text: '节点',
      },
    ],
    color: '#000',
    selectedColor: '#56abe4',
    backgroundColor: '#fff',
    borderStyle: 'white',
  },
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'V2EX',
    navigationBarTextStyle: 'black',
  },
}