this.$router.back()会模拟浏览器的返回按钮行为,不会触发新的路由导航,因此不会刷新页面。 示例代码: javascript // 在详情页组件中 methods: { goBack() { this.$router.back(); } } 3. 使用Vue Router的导航守卫 虽然在这个特定场景中,导航守卫可能不是必需的,但它们提供了一种在路由变化前后执行代码...
在Vue中设置返回页面不刷新可以通过以下几种方法:1、使用缓存组件(keep-alive),2、使用路由元信息(meta),3、使用历史模式的路由缓存(sessionStorage)。下面将详细展开其中一种方法,即使用缓存组件(keep-alive)。 使用缓存组件(keep-alive)可以有效地解决返回页面不刷新的问题。在Vue中,keep-alive是一个内置组件,用于...
1、页面路由的写法,其中$route.meta.keepAlive=true则页面路由放置在keep-alive组件中,表示需要缓存,否则不缓存,这里就可以通过控制meta中的keepAlive属性来控制router-view中的页面需不需要缓存了。 1 2 3 4 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router...
<router-view v-if="!$route.meta.keepAlive"></router-view> </template> 3、当我们需要从详情页返回到列表页的时候,详情页中只有使用this.$router.back()进行返回,我们想要的返回后列表页不刷新的效果才能生效 注:我在使用过程中注意到,当我不小心把详情页的路由配置页也加上了 keepAlive: true 以后,...
Vue.use(Navigation, { router }); 1. 2. 3. 在App.vue进行设置 // 使用navigation 包裹router-view组件 <navigation> <!-- <keep-alive> --> <router-view></router-view> <!-- </keep-alive> --> <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> --> </navigation...
vue-router跳转一般是这么写: toCurrentPage:function(thisId){ this.$router.push({path:'/test ',query:{id:thisId,option:""}}); } 但是当遇到,需要跳转同页面不同query的情况,上面的方法不起作用。当然了,从性能来说,理论上这种情况最佳的解决方案,是把需要刷新的包裹成一个init function,跳转的方法,...
router.push({ path: '/search', query: { q: keyword.value, slice: slice.value, }, }) searchByParams() }else{ //route.path发生变化,页面会自己刷新,所以这里不做操作了。 } }, false); } } detectBack.initialize();
在vue项目中使用this.$router.go(-1)返回上一页时,发现有时候该功能是正常的,有时候,路由改变了,但页面依旧停留在当前界面。
2.配置App.vue文件种的<router-view/> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 3.使用this.$router.back()返回 当用户在详情页点击返回的按钮时,我们把按钮的返回事件 this.router.back...