Vue删除当页最后一条数据完毕后不跳转到上一页问题

axios.post(BankAPI.product_listBatch,this.multipleSelection).then(res=>{
                        if(res.data.success){
                            let newPageing = Math.ceil((this.totalNum - this.multipleSelection.length) / this.indiPageSize);//向上取整
                            let currentPage = this.indiPageNum > newPageing ? newPageing : this.indiPageNum;
                            this.indiPageNum = currentPage < 1 ? 1 : currentPage;

                            this.refreshTable()
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        }else{
                            // this.$messageutil.errorMessage(res.message || res.error)
                        }
### Vue3 配置路由后跳转的解决方案 在 Vue3 中,如果配置好路由之后仍然遇到面无法正常跳转的情况,可能是由于以下几个原因引起的。以下是针对该问题的具体分析和解决方法: #### 1. **确保路由已正确定义** 在 Vue Router 的配置文件中,需确认 `routes` 数组中的路径定义是否正确。每条路由应至少包含 `path` 和 `component` 属性[^1]。 ```javascript const routes = [ { path: '/', name: 'Home', component: Home, // 确保这里指向的是正确的组件 }, { path: '/about', name: 'About', component: About, } ]; ``` #### 2. **检查 `<RouterView>` 是否存在** 如果未在模板中放置 `<RouterView>` 组件,则即使路由匹配成功也会渲染对应的内容。因此需要确保在应用的主要布局中加入此标签。 ```html <template> <div id="app"> <!-- 导航栏 --> <nav> <router-link to="/">首</router-link> | <router-link to="/about">关于我们</router-link> </nav> <!-- 动态加载视图区域 --> <RouterView /> </div> </template> ``` #### 3. **处理同一路由参数更新时刷新的问题** 当前路径变仅查询字符串或动态段发生变化时,默认会触发组件重新挂载的行为。可以通过监听 `$route` 对象的变化来手动调用数据获取逻辑[^2]。 ```javascript watch(() => route.params.id, (newId) => { fetchData(newId); // 假设这是个异步请求函数 }); ``` #### 4. **强制重绘通过设置唯一的 key 值** 若发现某些情况下尽管 URL 改变但实际展示内容却没有相应调整的现象,可以尝试为 `<RouterView>` 添加基于当前全量路径计算得出的独特键名属性作为区分依据之一[^3]。 ```html <RouterView :key="$route.fullPath" /> ``` 以上措施能够有效应对大部分关于 vue3 下因当操作引发的未能及时响应新状态而导致视觉层面停滞现象的发生概率大大降低。 #### 总结 综上所述,当面对 Vue3 路由配置完毕却依旧遭遇面难以顺利过渡的情形下,可以从核查基础设定准确性出发逐步排查直至深入探讨更深层次潜在隐患所在并采取针对性策略予以化解。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值