uniapp 路由不要显示#

在Uniapp中,路由默认使用的是hash模式,即在URL中添加#符号。如果你不想在URL中显示#,可以切换为使用history模式。

要在Uniapp中使用history模式,可以按照以下步骤进行操作:
在这里插入图片描述

  1. 打开manifest.json文件。
  2. "app"节点下添加一个"router" 节点。
  3. "router"节点下添加一个"mode"属性,并将其值设置为"history"

或者代码设置
示例:

{
  "app": {
    "router": {
      "mode": "history"
    }
  }
}

切换到history模式后,Uniapp将使用HTML5的history.pushState方法来管理路由,而不再使用hash模式。这样,在URL中就不会显示#符号了。

请注意,使用history模式需要后端服务器的支持。你需要在服务器上进行相应的配置,以确保在刷新页面或直接访问路由时能正确地返回对应的页面。

另外,切换到history模式后,你需要确保在打包或部署应用时,服务器能正确地处理路由请求,以避免404错误。具体的配置方式取决于你使用的服务器和后端框架。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uniapp中,可以使用条件渲染和动态组件来实现根据路由改变动态显示自定义tabbar组件的效果。 首先,在App.vue中定义一个自定义tabbar组件,如下所示: ```html <template> <view> <custom-tabbar v-if="showTabbar"></custom-tabbar> <router-view></router-view> </view> </template> <script> import CustomTabbar from '@/components/CustomTabbar' export default { components: { CustomTabbar }, computed: { showTabbar () { // 根据路由判断是否显示自定义tabbar组件 return this.$route.path !== '/home' } } } </script> ``` 在上面的代码中,我们使用了条件渲染来判断是否显示自定义tabbar组件。通过computed属性中的showTabbar函数,我们可以根据当前路由来判断是否显示自定义tabbar组件。如果当前路由为/home,则不显示自定义tabbar组件;否则,显示自定义tabbar组件。 接下来,在自定义tabbar组件中,我们可以使用动态组件来实现不同的tabbar样式。例如,我们可以定义一个Tabbar1组件和一个Tabbar2组件,分别表示两种不同的tabbar样式。在自定义tabbar组件中,我们可以根据路由来决定显示哪种样式的tabbar。代码如下: ```html <template> <view> <component :is="tabbarType"></component> </view> </template> <script> import Tabbar1 from '@/components/Tabbar1' import Tabbar2 from '@/components/Tabbar2' export default { components: { Tabbar1, Tabbar2 }, computed: { tabbarType () { // 根据路由判断显示哪种样式的tabbar return this.$route.path === '/home' ? 'Tabbar1' : 'Tabbar2' } } } </script> ``` 在上面的代码中,我们使用了动态组件来根据路由显示不同的tabbar样式。通过computed属性中的tabbarType函数,我们可以根据当前路由来决定显示哪种样式的tabbar。 最后,我们将自定义tabbar组件引入到App.vue中,并在路由发生变化时实现动态显示。这样,就可以根据路由改变动态显示自定义tabbar组件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花乐晴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值