前端模板TDesign路由为undefined页面无法跳转问题

问题描述:

今天使用前端框架的时候发现一个小问题:在使用TDesign的时候,发现点击侧边栏的时候地址栏发生了改变但是页面不跳转。

从一开始通过官网将TDesgin拉取下来直接开跑。成功跑起来也成功进入了页面。

但是当我去切换点击侧边栏切换页面的时候,发现页面不跳转,但是地址栏发生了改变。

仔细看地址栏已经发生改变但是页面却没有反应,但我刷新浏览器后页面却发生了改变。

好奇怪的现象。

解决方案:

出现上面的问题肯定是路由出现了问题,f12开始调试,发现跳转的时候路由未定义。

只需要在src/router/index.ts文件中的getActive方法加入如下的代码:

  if (route === undefined) {
    return '';
  }

修改前的代码:

修改后的代码:

成功解决地址栏切换页面跳转的情况。

还需要的注意事项:

还有一个问题就是在添加自己的页面的时候,要注意,不要直接在<template></template>标签中直接添加元素或者标签,需要用一个大的div标签来进行包裹,否则路由依然会出现问题。

正确示例:

错误示例:

各位大佬点点赞,收藏收藏,这个问题困扰了我三天三夜。

  • 17
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你在单页应用程序(SPA)中使用路由管理库(如Vue Router、React Router等)进行页面跳转时,可能会遇到点击新路由页面内容并未更新,仍然显示上一个路由的内容。这通常被称为“缓存”或“不活跃的视图”问题。这是因为现代前端路由默认设置下,为提高性能会复用现有的组件实例而不是每次都创建新的。 解决这个问题的方法通常有: 1. **手动触发视图更新**:在路由守卫(Vue Router的`beforeRouteUpdate`或React Router的`getServerSideProps`)中明确地调用组件的`forceUpdate()`方法,强制组件重新渲染。 2. **配置重载策略**:在路由配置中设置`meta`属性,比如`<router-view :key="$route.fullPath"></router-view>`,利用动态key值来提示浏览器每次切换都生成新的虚拟DOM。 3. **使用`replace`代替`push`**:如果不需要在历史记录留下痕迹,可以使用`this.$router.replace(to)`替换`this.$router.push(to)`,这样能完成跳转但不会将旧路由添加到浏览历史。 4. **禁用懒加载或预加载**:某些情况下,你可以关闭懒加载功能,让所有子路由在进入父路由时都被加载。 5. **使用`scrollBehavior`选项**:如果你使用的是Vue Router,可以通过`scrollBehavior`选项控制页面滚动行为,确保每次导航后回到顶部。 遇到此类问题时,检查你的路由配置和生命周期钩子,找出适合项目的解决方案。相关问题: 1. 如何识别是缓存导致的页面未刷新? 2. SPA应用中如何避免因缓存而引起的视觉冲突? 3. 在React Router中如何配置路由以消除这种问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值