uni-app vue3 只有一个页面时路由模式不生效 manifest h5 的 mode

uni-app vue3 只有一个页面时路由模式不生效 manifest h5 的 mode

开发环境 版本号 项目创建方式
Mac m2 HBuilderX

示例代码：

"h5": {  
    "router": {  
        "base": "./",  
        "mode": "hash"  
    },  
}

操作步骤：

vue3 h5 设置hash路由 页面没有 /#/

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages  
    {  
        "path": "pages/index/index",  
        "style": {  
            "navigationBarTitleText": "认证状态"  
        }  
    }  
]

预期结果：

应该以mode 设置的模式为准 设置hash 一个页面的时候也应该展示展示/#/

实际结果：

一个页面的时候没显示hash路由 的标志 已经配置了 mode模式

多个页面可以正常显示/#/



## bug描述：

vue3 h5 设置mode 页面没有明显区别（一个页面的路由的时候） 不知道是hash 还是history 并且设置成history 部署到服务器也可以正常访问  

但是两个页面或者以上 hash 路由 就会有 /#/  

vue2 的话 一个页面也会有 /#/  

是3 有啥特殊的吗？？

更多关于uni-app vue3 只有一个页面时路由模式不生效 manifest h5 的 mode的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3 只有一个页面时路由模式不生效 manifest h5 的 mode的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 结合 Vue 3 开发时，如果你发现只有一个页面时路由模式不生效，特别是在配置 manifest.json 中的 H5 mode 时，通常是因为路由配置或者页面注册方式的问题。下面我将展示一个基本的配置示例，帮助你确保路由模式（如 hash 或 history）在单页面应用中生效。

首先，确保你的 manifest.json 文件中正确配置了 H5 的相关信息。这里我们主要关注 h5 下的 router 配置，虽然 uni-app 官方文档指出 manifest 中的 router 配置主要用于多页面应用，但设置正确的 base 路径仍然很重要。

// manifest.json
{
  "mp-weixin": {},
  "h5": {
    "devServer": {
      "https": false,
      "hot": false,
      "disableHostCheck": true,
      "proxy": {}
    },
    "router": {
      "mode": "history",  // 这里设置路由模式，但实际生效还需依赖Vue Router配置
      "base": "/"  // 基础路径
    }
  }
}

接下来，在你的 Vue 3 项目中，确保你正确配置了 vue-router。在 uni-app 中，通常你会在 pages.json 中注册页面，但在使用 Vue Router 时，你需要手动设置路由。以下是一个简单的 vue-router 配置示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/pages/index/index.vue'; // 假设这是你的唯一页面

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 使用history模式
  routes
});

export default router;

确保你的 main.js 或 main.ts 文件中正确引用了这个路由配置：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

注意，uni-app 在构建 H5 时，实际上是将 Vue 项目打包成一个单页应用（SPA），因此 vue-router 的配置会覆盖 manifest.json 中的部分设置。如果上述配置正确无误，且你的页面组件也正确注册，那么路由模式（如 history）应该能够生效。

确保在开发环境中测试这些配置，因为生产环境的构建过程可能会有额外的配置影响路由行为。

回到顶部