用HBuiderX 创建基于vue3的 应用程序,
在pages.json里按官网配置如下内容
// pages.json
{
"tabBar": {
"iconfontSrc":"static/iconfont.ttf",
"list": [
{
"pagePath": "pages/index/index",
"text": "Tab1",
"iconfont": {
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}
]
}
}
结果编译报错
13:51:16.162 [Vue warn]: injection "Symbol(route location)" not found.
at <TabBar>
at <Layout>
at <App>
13:51:16.166 [Vue warn]: Unhandled error during execution of watcher callback
at <TabBar>
at <Layout>
at <App>
13:51:16.166 [Vue warn]: Unhandled error during execution of setup function
at <TabBar>
at <Layout>
at <App>
13:51:16.170 UncaughtTypeError: Cannot read property 'meta' of undefined
at watchEffect (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js:19604:24)
at callWithErrorHandling (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:1327:22)
如果创建 基于vue2的工程,则不报错,请问
是tabBar不支持vue3么?还是需要做特殊配置
8 个回复
DCloud_UNI_Anne
HBuilderX3.6.0 测试未复现此问题,请提供简单可复现最小化示例(上传附件)【咨询问题/bug处理优先级规则】:https://ask.dcloud.net.cn/article/38139
瀚海浪亭 - 百度一下,我告诉你。
文档:https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
Tips
当设置 position 为 top 时,将不会显示 icon
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。
瀚海浪亭
至少配置两个,也就是list下要有两项
2022-09-06 15:40
j***@163.com (作者)
开发环境 HBuider X3.5.3
开发过程 新建项目-》uni-app-》模板选择uni-ui-》vue选择 vue3.0
等待项目 建立完成后,在pages.json中加入 官网 tabBar的示例代码
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#FF0000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "Tab1"
}]
}
后 编译报错,附件 是过程创建的工程
j***@163.com (作者)
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}
这么写 还是报错!
15:52:19.079 [Vue warn]: injection "Symbol(route location)" not found.
at <TabBar>
at <Layout>
at <App>
15:52:19.083 [Vue warn]: Unhandled error during execution of watcher callback
at <TabBar>
at <Layout>
at <App>
15:52:19.087 [Vue warn]: Unhandled error during execution of setup function
at <TabBar>
at <Layout>
at <App>
15:52:19.094 UncaughtTypeError: Cannot read property 'meta' of undefined
at watchEffect (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js:19604:24)
at callWithErrorHandling (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:1327:22)
at callWithAsyncErrorHandling (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:1336:21)
at ReactiveEffect.getter [as fn] (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:2959:24)
at ReactiveEffect.run (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:187:25)
at doWatch (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:3058:16)
at watchEffect (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:2879:12)
at useSwitchTab (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js:19603:3)
at setup (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js:19550:25)
at callWithErrorHandling (http://localhost:3000/@fs/D:/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:1327:22)
15:52:19.137 uni-page-body not found
z***@88.com
遇到同样的错误。
w***@163.com
在tabbar的list里面有几个数组,那么在pages里面就要定义几个页面。这样才不会出错,
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/shujia/shujia",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#333333",
"selectedColor": "#FE3A33",
"borderStyle": "black",
"backgroundColor": "#FFFFFF",
"list": [{
"pagePath": "pages/shujia/shujia",
"iconPath": "static/tabBar/home.png",
"selectedIconPath": "static/tabBar/homeActive.png",
"text": "书架"
},{
"pagePath": "pages/index/index",
"iconPath": "static/tabBar/classify.png",
"selectedIconPath": "static/tabBar/classifyActive.png",
"text": "搜索"
}
]
},
"uniIdRouter": {}
}
1***@qq.com
这个是正解
2023-08-25 11:42
l***@163.com
是不是你没有在page里面注册这个页面呢?
k***@transsion.com
我的不报错 ,只是完全不展示