首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我路由另一个页面时,为什么ı无法更改导航栏上的按钮文本?

当你路由到另一个页面时,无法更改导航栏上的按钮文本,可能是由于以下几个原因导致的:

  1. 页面刷新:当你路由到另一个页面时,可能会触发页面的刷新,导致之前的按钮文本被重置为默认值。要解决这个问题,可以尝试在页面加载时从缓存或者服务器获取最新的按钮文本,然后动态更新导航栏上的按钮文本。
  2. 前端路由问题:可能是由于前端路由的配置或实现问题导致的。请确保你的前端路由正确配置,并且在路由切换时正确更新导航栏上的按钮文本。
  3. 组件状态未更新:导航栏按钮文本通常与某个组件的状态绑定,如果该组件的状态没有正确更新,导航栏上的按钮文本也不会更新。请检查你的组件状态更新的逻辑,确保在路由切换时正确更新相关状态。
  4. 样式问题:导航栏按钮文本的样式可能会影响其显示效果,如果你更改了按钮文本但没有更改相应的样式,可能会导致按钮文本没有改变的错觉。请检查导航栏按钮的样式设置,确保其样式与按钮文本的变化一致。

总结起来,无法更改导航栏上的按钮文本可能是由于页面刷新、前端路由问题、组件状态未更新或者样式问题导致的。请根据具体情况逐一排查,并确保在路由切换时更新导航栏按钮文本的逻辑和样式设置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何制作自己原生 JavaScript 路由

每当在浏览器地址中输入新 URL,但我们不想刷新页面,就会发生这种情况,我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储在 routes[] 数组中。...太糟糕了,因为单击浏览器“后退”和“前进”按钮与浏览历史记录中 URL 导航有关。如果没有 History API,就无法谈论路由。...这就是使浏览器无需重新加载页面即可更改 URL 原因。 结果:现在,每次我们单击按钮,URL 实际都会在浏览器地址更改。内容框也会更新。 ? 我们原生 JS 路由开始运行了。...当你第一次在 PWA 中加载此路由,必须确保如果直接在地址中输入/page/home,它可以工作。 到目前为止,我们仅从前端更改路由器地址。...假定每次你导航到出现在路由按钮 URL ,实际都会从服务器单独加载该 URL。 因此你有责任确保/page/about 将路由器和页面的加载到应用程序根视图中。

3.9K20

最新iOS设计规范四|3大界面要素:视图(Views)

(Bars) ,可以告诉用户在APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...页面视图控制器可以使用滚动或页面卷曲两种样式任意一种完成页面之间转场过渡。 ? 如果需要,可以自定义一种非线性导航方法。使用页面视图控制器页面只能按顺序跳转,而跨页面之间是无法跳转。...浮层适合大屏幕,可以包含各种元素,包括导航、工具、标签、表格、集合、图像、地图和自定义视图。当浮层出现时,其他视图交互行为会被禁止,直到浮层被取消/关闭。...使用浮层所显示内容要与当前页面内容关联。例如:当你点击“操作”按钮,许多iPad应用会弹出一个浮层(如下图)。 ? 尽量不要在iPhone使用浮层。...如果可能的话,让用户在一次点击中关闭一个浮层,同时打开另一个浮层。避免额外点击,尤其是需要在多个不同项目中打开浮层。 避免浮层太大。浮层不应该占据整个屏幕,足以显示其内容并指向触发按钮即可。

8.5K31
  • 前端成神之路-vue前端项目02

    > 5.设置激活子菜单样式 通过更改el-menuactive-text-color属性可以设置侧边菜单中点击激活项文字颜色 通过更改菜单项模板(template)中i...,在main主体结构中添加一个路由占位符 制作好了Welcome子级路由之后,我们需要将所有的侧边二级菜单都改造成子级路由链接 我们只需要将el-menurouter属性设置为true就可以了,...,删除,分配角色按钮当我们把鼠标放到分配角色按钮 希望能有一些文字提示,此时我们需要使用文字提示组件(复制文字提示组件代码,在element.js中导入组件Tooltip),将分配角色按钮包含...-- 分页导航区域 @size-change(pagesize改变触发) @current-change(页码发生改变触发) :current-page(设置当前页码) :page-size(设置每页数据条数...$message.success('更新状态成功') }, 14.实现搜索功能 添加数据绑定,添加搜索按钮点击事件(当用户点击搜索按钮时候,调用getUserList方法根据文本框内容重新请求用户列表数据

    4K10

    Blazor 中路由路由模板

    在客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单提交按钮或下拉列表中触发服务器调用项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径整个过程。...毋庸置疑,当应用程序位置以编程方式更改时,路由器也会启动。最后一点也非常重要,路由器在浏览器历史记录中记录任何它负责位置更改,因此后退和前进按钮可以按用户期望工作。...最后结果就是,Blazor 路由器目前仅提供作为客户端路由基本功能。例如,它不具备检查路由授权和创建在位置更改时执行视图转换链接功能。...对于具有约束路由,任何无法成功转换为指定类型参数值都会使匹配失效,并且无法识别该路由。 更智能链接和编程 URL 导航 在 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容链接。...但是,当定位标记用于呈现菜单或导航,可能需要一些额外工作来调整 CSS 样式以反映链接状态。 内置 Blazor NavLink 组件可以用于任何需要定位点元素地方,尤其是在菜单中。

    8.4K21

    最新iOS设计规范三|3大界面要素:(Bars)

    一、导航(Navigation Bars) 导航出现在页面的顶部,位于状态下方,可以给一系列层级页面进行导航。当点击进入新页面,其导航左侧会出现一个返回按钮,并带有前一页面的标题。...但是,无边框样式在标准标题导航中可能无法很好地起作用,因为该标题和按钮可能难以区分。iPad拆分视图是一个例外,更多是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间一致性。...如果导航包含多个文本按钮,需要通过在按钮之间插入固定空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分问题。 考虑在导航中使用分段控件,使APP层次结构更加扁平。...如果由于水平空间有限而无法显示某些标签,则最后一个标签会变为“更多”标签,从而需要在另一个页面上显示其他标签。 通常,使用标签在应用程序级别组织信息。...工具应该是当前页面中有意义并且常用命令。 思考图标或文本标题按钮哪个更适合。当你需要3个以上工具按钮,图标的效果更好。如果是3个或3个以下按钮文本按钮可以更清晰。

    9.9K10

    最新iOS设计规范五|3大界面要素:控件(Controls)

    (Bars) ,可以告诉用户在APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...系统按钮 系统按钮通常出现在导航和工具中,也可以在任何地方使用。 ? 在标题中使用动词。特定于操作标题显示按钮是交互式,并说明单击该按钮时会发生什么。 使用标题格式命名标题。...虽然你无法更改编辑菜单形状,但它位置是可配置 - 你可以改变展示位置来避免它覆盖重要内容或界面的某些部分。 不要使用与编辑菜单相同功能其他控件。...最好采用动态类型,这样当用户更改设备文本大小时,标签可读性仍然可以很好。同时,你还需要在启用了辅助功能选项情况下测试标签,例如粗体文本。...将进度条用于持续时间明确任务。进度条非常适合显示任务状态,尤其是当它帮助传达任务需要完成多长时间。 在导航和工具中隐藏轨道未填充部分。默认情况下,进度条轨道包含已填充和未填充部分。

    8.6K30

    11 个高级 Vue 编码技巧

    一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG ,我只是在要更改部分设置一个类(此处称为...可以访问应用程序所有可用路由,添加元数据以使逻辑更智能,甚至可以自动填充导航页面面包屑等内容!然而,这乍一看并不明显,也不能像我们通常访问路由方式直接访问。...我最近在一个项目中使用它来生成动态侧边导航组件。我在路由器中某些路由设置了一个 showInSidebar 元数据属性,我想隐藏在侧边中。...5、路线更改时滚动到顶部 当更改路线ni,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望顶部。...**注意:**对于自定义 Button 组件,当你实际是指样式变体,请确保不要将 type 作为 prop 使用,因为 type 已经是 HTML 按钮一个东西,应该是一个单独 prop 来处理表单提交和重置等事情

    2.6K20

    10个关于 Vue 高级开发技巧

    一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG ,我只是在要更改部分设置一个类(此处称为...可以访问应用程序所有可用路由,添加元数据以使逻辑更智能,甚至可以自动填充导航页面面包屑等内容! 然而,这乍一看并不明显,也不能像我们通常访问路由方式直接访问。...我最近在一个项目中使用它来生成动态侧边导航组件。我在路由器中某些路由设置了一个 showInSidebar 元数据属性,我想隐藏在侧边中。...5、路线更改时滚动到顶部 当更改路线ni,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望顶部。...注意:对于自定义 Button 组件,当你实际是指样式变体,请确保不要将 type 作为 prop 使用,因为 type 已经是 HTML 按钮一个东西,应该是一个单独 prop 来处理表单提交和重置等事情

    6.1K10

    11 个高级 Vue 编码技巧

    一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中:在上面的示例中,当我将鼠标悬停在 SVG ,我只是在要更改部分设置一个类(此处称为...可以访问应用程序所有可用路由,添加元数据以使逻辑更智能,甚至可以自动填充导航页面面包屑等内容!然而,这乍一看并不明显,也不能像我们通常访问路由方式直接访问。...我最近在一个项目中使用它来生成动态侧边导航组件。我在路由器中某些路由设置了一个 showInSidebar 元数据属性,我想隐藏在侧边中。...5、路线更改时滚动到顶部 当更改路线ni,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望顶部。...**注意:**对于自定义 Button 组件,当你实际是指样式变体,请确保不要将 type 作为 prop 使用,因为 type 已经是 HTML 按钮一个东西,应该是一个单独 prop 来处理表单提交和重置等事情

    2.6K30

    10个关于 Vue 高级开发技巧

    一旦我们把它作为一个组件,我们就可以使用 把它放到我们应用程序任何其他组件或页面中: 在上面的示例中,当我将鼠标悬停在 SVG ,我只是在要更改部分设置一个类(此处称为...可以访问应用程序所有可用路由,添加元数据以使逻辑更智能,甚至可以自动填充导航页面面包屑等内容! 然而,这乍一看并不明显,也不能像我们通常访问路由方式直接访问。...我最近在一个项目中使用它来生成动态侧边导航组件。我在路由器中某些路由设置了一个 showInSidebar 元数据属性,我想隐藏在侧边中。...5、路线更改时滚动到顶部 当更改路线ni,Vue 会保持在页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望顶部。...注意:对于自定义 Button 组件,当你实际是指样式变体,请确保不要将 type 作为 prop 使用,因为 type 已经是 HTML 按钮一个东西,应该是一个单独 prop 来处理表单提交和重置等事情

    6K20

    谈一谈|个人博客网站开发记录二

    导航可以视为 一个模块,每个红色方形可以视为一个模块。左边4个模块在形式是一样,所以一共就3个模块,大导航页面切换按钮以及搜索框。 1.页面切换按钮制作 ?...2.导航封装 大导航只是一个灰色长方形,等会需要插入多个页面切换按钮,预留slot插槽。 在style中添加flex布局‘display:flex;’ navBar.vue ?...导航与对应页面的绑定 1. 在views文件中建立所有需要用到页面 ? 2. 在main.js中引入v-router ?...4.路由及对应模块展示 更改网址加载对应模块,那么在哪加载呢? 只需要在App.vue中添加标签,对应模块内容便会替换该标签。 ?...5.导航按钮绑定路由 切换路由可以加载对应模块,当点击导航某个按钮执行切换路由操作,便完成了页面的切换。 navBarItem.vue ? 效果展示 ? ?

    86530

    最新iOS设计规范二|7大应用架构

    人们通过以下方式关闭卡片: 从屏幕顶部向下滑动 卡内容滚动到顶部,可以从屏幕任意位置向下滑动 轻按一个按钮 工作表常用在无法实现复杂任务、非沉浸式模式和内容。...例如,当模态视图包含导航,它应该采用与APP导航相同外观。 为模态视图展示提供合适过渡动画。使用与APP风格统一过渡动画,增强用户对内容转变认知。...用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你APP。 使用导航贯穿层级结构。导航标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。...拆分视图提供与选项卡相同快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同多个页面,请使用页面控件。页面控件清楚地传达了可用页面的数量以及当前处于活动状态页面。...仔细考虑APP中设置选项优先级。APP主页是用来放置关键内容或者常用选项。次级页面更适合放置偶尔才会更改选项。 系统“设置”中应当放置不经常更改配置选项。

    2.6K20

    AngularDart4.0 英雄之旅-教程-07路由

    路由导航另一个名称。 路由导航从视图到视图机制。 分割AppComponent 当前应用程序加载AppComponent并立即显示英雄列表。...component(组件):此路由导航到(HeroesComponent)将被激活组件。 在路由导航页面阅读更多关于定义路由信息。...在路由导航页面阅读有关默认路由和重定向更多信息。 将导航添加到dashboard  在模板添加dashboard 导航链接,在heroes链接上方。...当用户从列表中选择一个英雄,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整详细信息页面。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

    17.6K30

    AngularDart 4.0 高级-路由概述 顶

    本指南涵盖路由主要功能,通过演示可以实时运行小应用程序(查看源代码)演示它们。 概观 浏览器是一种熟悉应用程序导航模型: 在地址中输入一个URL,然后浏览器导航到相应页面。...点击页面链接,浏览器导航到新页面。 点击浏览器后退和前进按钮,浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...它可以将浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面链接,并在用户单击链接导航到适当应用程序视图。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激,您都可以进行命令式导航。并且路由器在浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...与英雄细节不同,当您键入更新,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮

    6.1K20

    1小,不会代码我如何完成 网易云音乐 大作业网页制作?(IVX 第2篇)

    小媛:好,迫不及待了。 二、导航制作 1_bit:我们第一步先制作一个导航,下图黄色框选位置就是导航。 小媛:不会做… 1_bit:你不用打代码,我们画出来就可以了。...1_bit:下一步我们由于是做是一个导航,那么这个导航是横排显示,那么我们可以选择一个行组件,这时在这个组件中添加一些文本就可以横排显示。 小媛:什么是组件呀?...我们此时点击页面1,在右侧组件中(下图绿色框选部分),选择行即可将行添加到页面1中,添加后,行将会在右侧页面1中进行显示。...1_bit:接下来我们再到页面1下创建一个行,将 logo 和图片行包裹进去。 小媛:为什么要这么做? 1_bit:其实这样只是为了好分类而已。...小媛:那怎么改那个按钮呢? 1_bit:简单,这个时候你只需要删除按钮文本,然后选择使用图标点击左箭头就可以了,另一个按钮也是这样。 小媛:原来如此,下一步呢?

    1.9K30

    BuildAdmin07:导航动态添加tabs如何实现

    可以看到header内容是由 \ 动态组件实现,使用is属性绑定不同导航组件。...同时,选中tab字体颜色加深;选中关闭按钮时候,按钮会有动画。 当然,上面的tab是写死,点击菜单并不能增加,点击关闭按钮无法关闭。所以接下来就是实现两个部分:添加按钮和关闭按钮。...4. setActiveRoute 这里也一起把setActiveRoute 看了,当在路由导航守卫afterEach调用此方法,就会将afterEach传过来to路由赋值给activeRoute,...因为在整个项目中会有很多路由,例如上面讲到404、loading都是,所以这里路由必须保证为menu中路由,所以要以admin开头。 为什么要调用addTabs方法?...总结:只要路由跳转,activeRoute和activeIndex就会改变。 4. 创建tab 最后就是实现tabs.vue,遍历tabsView渲染导航tabs。

    46420
    领券