uniapp侧边栏实现跳转页面

UniApp 中实现侧边栏点击跳转到其他页面通常涉及以下几个步骤：

1. **组件结构**：首先，在项目的 `pages` 目录下创建一个包含侧边栏的父组件，例如 `sidebar.vue`，然后在此组件内添加菜单项和对应的路由链接。

<template>
  <view class="sidebar">
    <uni-list>
      <uni-list-item v-for="(item, index) in menus" :key="index" @click="jumpToPage(item.url)">
        <view>{{ item.title }}</view>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        { title: '首页', url: '/home' },
        { title: '详情页', url: '/detail' },
        // 更多菜单项...
      ]
    };
  },
  methods: {
    jumpToPage(url) {
      this.$router.push({ path: url });
    }
  }
};
</script>

2. **引入路由**：在项目的 `main.js` 或者 `router-view` 组件所在的配置文件中，注册相应的页面路由。如果你使用的是 UniApp 的官方 Router，可以这样做：

import Vue from 'vue';
import App from './App.vue';
import router from './router/router';

Vue.config.productionTip = false;

new Vue({
  router,
}).$mount('#app');

3. **路由设置**：确保在路由配置文件中定义了对应的目标页面。比如，`home` 和 `detail` 页面可以分别在 `routes` 数组中定义：

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/detail',
    component: () => import('@/views/Detail.vue'),
  },
  // 其他页面...
];

当你在侧边栏点击某一项时，`jumpToPage` 方法会被触发，页面会根据传入的 URL 跳转到相应的目标页面。