uniapp的vue项目配置路由

1、创建页面

首先，在 pages.json 文件中配置你的页面路径。这个文件是 UniApp 用来管理页面路由的核心配置文件。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    },
    // 其他页面配置...
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
      // 其他 tab 项...
    ]
  }
}

在上面的配置中，定义了两个页面：index 和 about，并且将它们添加到了 tabBar 中。

2、 创建 Vue 组件

在 pages/index/index.vue 和 pages/about/about.vue 中创建对应的 Vue 组件。

<!-- pages/index/index.vue -->
<template>
  <view>
    <text>这是首页</text>
    <button @click="navigateToAbout">跳转到关于页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      });
    }
  }
}
</script>

<!-- pages/about/about.vue -->
<template>
  <view>
    <text>这是关于页面</text>
    <button @click="goBack">返回首页</button>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

3、使用条件渲染模拟路由状态（可选）

虽然 UniApp 没有路由状态管理，但可以使用 Vue 的数据绑定和条件渲染来模拟某些路由状态。例如，可以在一个主页面中根据状态动态加载不同的组件。

<!-- pages/main/main.vue -->
<template>
  <view>
    <component :is="currentView"></component>
    <button @click="navigateToHome">首页</button>
    <button @click="navigateToAbout">关于</button>
  </view>
</template>

<script>
import Home from '@/pages/index/index.vue';
import About from '@/pages/about/about.vue';

export default {
  data() {
    return {
      currentView: 'Home' // 默认显示首页
    };
  },
  components: {
    Home,
    About
  },
  methods: {
    navigateToHome() {
      this.currentView = 'Home';
    },
    navigateToAbout() {
      this.currentView = 'About';
    }
  }
}
</script>

4、使用全局状态管理（可选）

如果需要在多个页面间共享状态，可以使用 Vuex 或 UniApp 自带的 store（仅适用于 H5 平台）。对于小程序等平台，可能需要使用全局变量 uni.setStorageSync/uni.getStorageSync 来存储和读取状态。

总结

UniApp 的路由配置与传统 Vue 项目有所不同，它依赖于页面跳转 API 和条件渲染来实现类似路由的功能。通过合理配置 pages.json 文件和使用 UniApp 提供的 API，你可以轻松地在 UniApp 项目中实现页面导航和状态管理。