mpvue实现左侧导航与右侧内容的联动

下面是详细讲解如何使用mpvue实现左侧导航与右侧内容的联动。

一、安装mpvue

首先需要安装mpvue脚手架，具体可以参考mpvue官网提供的安装指引。

二、创建页面结构

接下来需要创建左侧导航和右侧内容的页面结构，参考如下代码：

<template>
  <div class="container">
    <div class="sidebar">
      <!-- 左侧导航 -->
    </div>
    <div class="main">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

三、在左侧导航中实现跳转

在左侧导航中使用<navigator>标签实现页面跳转，具体可以参考如下代码：

<template>
  <div class="container">
    <div class="sidebar">
      <navigator url="/pages/index/index" open-type="navigate">
        Index
      </navigator>
      <navigator url="/pages/about/about" open-type="navigate">
        About
      </navigator>
    </div>
    <div class="main">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

其中，url属性指定跳转的路径，open-type属性用于指定跳转类型。

四、在右侧内容中渲染页面

在右侧内容中采用<router-view>标签渲染页面，具体可以参考如下代码：

<template>
  <div class="container">
    <div class="sidebar">
      <navigator url="/pages/index/index" open-type="navigate">
        Index
      </navigator>
      <navigator url="/pages/about/about" open-type="navigate">
        About
      </navigator>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

五、配置路由

最后需要配置路由，指定页面跳转的路径和对应页面的组件。具体可以参考如下代码：

const routes = [
  {
    path: '/pages/index/index',
    component: require('./pages/index/index.vue')
  },
  {
    path: '/pages/about/about',
    component: require('./pages/about/about.vue')
  }
];

const router = new Router({
  routes
});

export default router;

六、示例说明

实现了左侧导航和右侧内容的联动之后，我们就可以在左侧导航中添加不同的导航项，对应加载右侧的不同页面。以下是一个具体的示例：

• 首先，在/pages/index/index.vue和/pages/about/about.vue中添加一个标题

<template>
  <div>
    <h3>{{title}}</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: ''
      }
    },
    mounted() {
      let title = '';
      if (this.$route.path === '/pages/index/index') {
        title = 'Index';
      } else if (this.$route.path === '/pages/about/about') {
        title = 'About';
      }
      this.title = title;
    }
  }
</script>

• 然后在左侧导航中添加相应的导航项

<template>
  <div class="container">
    <div class="sidebar">
      <navigator url="/pages/index/index" open-type="navigate">
        Index
      </navigator>
      <navigator url="/pages/about/about" open-type="navigate">
        About
      </navigator>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

• 最后在app.json中将首页指向/pages/index/index

{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "mpvue demo",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

这样，在小程序中就能看到左侧导航和右侧内容的联动效果了。