vue返回不刷新页面

本文详细介绍了账套基本信息管理模块在Vue项目中的路由配置细节,包括路径设置、组件加载方式、keepAlive缓存控制及导航守卫的实现,确保了页面的高效加载和用户体验。

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

router里的index.js
{   //账套-基本信息管理
                    path: '/home/zhangtao/base_message_manage',
                    name: '',
                    component: resolve => require(['@/pages/zhangtao/base_message_manage'], resolve),
                    meta:{
                        keepAlive:false
                    }
                },


router.beforeEach((to,from,next)=>{
    if (to.path == "/entry_company_message" ||to.path == "/password_login" || to.path == "/" || to.path == "/forget_password" || to.path == "/bind_phone") {
        next()
    }else{
        if (localStorage.getItem('user')) {
            if(to.path == "/home/zhangtao/kemushezhi"){
                alert(2)
                from.meta.keepAlive = true
            }
            if(to.path == "/home/zhangmian/index" && to.query.no){
                console.log(from)
                from.meta.keepAlive = false
            }
            next()
        }else{
            next()
            // setTimeout(()=>{
                // alert('登陆过期')
                next({path:'/'})
            // },2000)
        }
    }
    // if (to.path != "/password_login") {
    //     if (localStorage.getItem('user')) {
    //         next()
    //     }else{
    //         next()
    //         if(to.path == "/" || to.path == "/forget_password"){
    //
    //         }else{
    //             setTimeout(()=>{
    //                 alert('登陆过期')
    //                 next({path:'/password_login'})
    //
    //             },2000)
    //         }
    //
    //     }
    // }else{
    //     next()
    // }
})
<keep-alive>
                        <router-view v-if="$route.meta.keepAlive"></router-view>
                    </keep-alive>

                    <router-view v-if="!$route.meta.keepAlive"></router-view>
### 实现 Vue3 返回刷新页面的解决方案 为了确保在使用 Vue 3 的应用中,返回上一页会触发页面刷新,可以采用监听路由变化的方式。通过这种方式可以在每次路由发生变化执行特定逻辑,从而避免必要的组件销毁与重建。 #### 方法一:利用 `beforeRouteUpdate` 钩子函数处理同一路由参数改变的情况 对于同一个路由下同参数的变化场景,可以通过定义 `beforeRouteUpdate` 寿命周期钩子来捕获这些变化并作出响应: ```javascript export default { data() { return { message: "初始消息" } }, beforeRouteUpdate(to, from, next) { this.message = to.params.id; console.log('路由更新'); next(); } } ``` 此方法适用于在同一路径内传递动态参数的情形,在这种情况下,即使 URL 发生了更改,也会造成整个视图的重载[^1]。 #### 方法二:设置 keep-alive 缓存指定组件 另一个有效的策略是在父级模板里包裹 `<keep-alive>` 标签,并给定要缓存的目标组件名称。这样做的好处是可以保留被包含组件的状态而必每次都重新加载它们的内容。 ```html <template> <div id="app"> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <!-- 只有 Home 组件会被缓存 --> <component :is="Component" v-if="$route.meta.keepAlive"/> <keep-alive include="Home"> <component :is="Component"/> </keep-alive> </transition> </router-view> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // ...其他代码... </script> ``` 上述例子展示了如何仅让名为 “Home”的组件享受缓存待遇,而其它非匹配项则按照常规流程渲染。这种方法特别适合那些频繁访问却需要经常性初始化的数据密集型界面[^2]。 #### 方法三:调整 Nginx 或 Webpack Dev Server 设置防止 404 错误引发的整体刷新 如果应用程序处于生产环境中,则可能还需要考虑服务器端配置问题。比如当用户直接输入深层链接地址或点击浏览器前进/后退按钮遇到 404 错误,这通常是因为缺少正确的服务端转发规则所致。针对这种情况,应该修改 Nginx 或者 webpack-dev-server 的配置文件以支持 HTML5 History API 模式的单页应用(SPA),具体做法已在先前讨论过[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值