vue中 beforeRouteLeave 生命周期函数,在使用 element-UI的table 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。

在Vue项目中,利用beforeRouteLeave导航守卫,结合Element-UI的表格组件,当用户从视频页面(video)或关于页面(about)离开后再返回,能保持原来的滚动条位置。其他页面则重置状态,包括清空leftArr和rightArr数组,并设置key为true。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导航守卫 beforeRouteLeave:

案例

<script>
  //在使用 element-UI的table 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。(video是页面的路径名称)
  beforeRouteLeave (to, from, next) {
    if (to.name == 'video') {
      this.key = false
    }else if (to.name == 'about') {
      this.key = false
    } else {
      this.leftArr = []
      this.rightArr = []
      this.key = true
    }
    next()
  },
</script>

借鉴文章:vue中 beforeRouteLeave 生命周期函数_雪爪鸿泥的博客-优快云博客

Vue 中,你可以使用 Element UI 的 `el-table` 组件结合 `v-link` 或者通过事件绑定的方式来实现单元格内点击跳转到一个页面的功能。这里是一个简单的例子: 首先,你需要安装 Element UIVue Router(如果你还没有安装的话),可以通过 npm 或 yarn 安装: ```bash npm install element-ui vue-router # 或者 yarn add element-ui vue-router ``` 然后,在你的组件模板中,假设有一个名为 `tableData` 的数据数组,每个对象都有一个 `href` 属性指向你要导航的目标 URL: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="href" label="链接" clickable> <!-- 使用 v-link 实现单击跳转 --> <template slot-scope="{ row }"> <a v-link="{ path: row.href }">{{ row.name }}</a> </template> </el-table-column> </el-table> </template> <script> import { defineComponent, ref } from 'vue'; import { ElTable, ElTableColumn } from 'element-plus'; import { useRouter } from 'vue-router'; export default defineComponent({ components: { ElTable, ElTableColumn }, setup() { const router = useRouter(); // 假设你有如下的数据结构 const tableData = [ { name: '用户A', href: '/user-a' }, { name: '用户B', href: '/user-b' } ]; return { tableData, router }; } }); </script> ``` 在这个例子中,当你点击表格中的单元格时,`v-link` 会自动根据 `row.href` 跳转到相应的路由。 如果你使用的是传统的浏览器历史 API,你可以使用 JavaScript 直接处理点击事件: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="href" label="链接" @click="handleCellClick"> <template slot-scope="{ row }"> <a href="{{ row.href }}">{{ row.name }}</a> </template> </el-table-column> </el-table> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ methods: { handleCellClick(event) { event.preventDefault(); // 阻止默认的行为(防止表格外的跳转) this.$router.push(event.currentTarget.href); // 跳转到目标URL } } }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

xingxingwuxin

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明:

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

余额充值