英文:
Problem with ionic/vue router animation bleeds
问题
I'm building an ionic/vue app and I'm having a problem with the animation on logout. Animation stutters when moving from the main page to the authorization page.
我正在构建一个 Ionic/Vue 应用程序，但在注销时遇到了动画问题。在从主页切换到授权页面时出现动画卡顿的问题。
I think problem in router.
我认为问题出在路由器中。
This is how my routes look like.
这是我的路由配置。
I logout from TabsPage to PinCodePage.
我从 TabsPage 注销到 PinCodePage。
英文:
I'm building an ionic/vue app and I'm having a problem with the animation on logout. Animation stutters when moving from the main page to the authorization page
I think problem in router
const routes: Array<RouteRecordRaw> = [
{
path: '/auth',
name: 'auth',
component: FeatureAuthByLoginAndPassword,
meta: {
middleware: [guest],
},
},
{
path: '/pinCode',
name: 'pinCode',
component: FeatureAuthByPinCode,
meta: {
middleware: [pincode],
},
},
{
path: '/',
redirect: '/tabs/tab1',
},
{
path: '/tabs/',
component: TabsPage,
meta: {
middleware: [auth],
},
children: [
{
path: '',
redirect: 'tab1',
},
{
path: 'tab1',
component: () => import('@/pages/ActiveClaimsList.vue'),
},
{
path: 'tab2',
component: () => import('@/pages/AllClaimList.vue'),
},
{
path: 'tab3',
component: () => import('@/pages/ClaimsHistory.vue'),
},
],
},
this is how my routes look like
I logout from TabsPage to PinCodePage
const signOut = () => {
logout();
router.replace('/pinCode');
};
答案1
得分: 0
Sure, here's the translated content:
重要提示：在我的回答中，我对图片中显示的源代码不熟悉，所以我只能假设其预期目的是在前台显示一个PIN码输入界面（FeatureAuthByPinCode），而背景中可见的内容是以前路由的内容（TabsPage），不应再显示。
Vue-Router：replace()
- 不发送新的请求
- 只是用下一个内容替换当前内容
- 浏览器历史记录中不会有记录
- 返回按钮失去功能（如果使用
replace，这可能是目标） - 可能由于缓存，以前页面的内容仍然可见（这不是页面的问题，而是浏览器的问题）
Vue-Router：push()
- 新条目将添加到浏览器历史记录中
- 绝对不会干扰缓存
- 可以使用返回按钮
Vue-Router：如何在浏览器上禁用当前页面缓存？
在元数据中使用inhibitCache: true。
这在需要经常更新页面内容而不依赖于浏览器缓存的情况下可能会有帮助（也许使用replace()时）。
const routes = [
// ...
{
path: '/about',
component: ExampleAbout,
meta: {
// 在about路由上禁用缓存
inhibitCache: true
}
},
// ...
]
英文:
IMPORTANT: In my response, I am not familiar with the source code shown in the picture, so I can only assume that the intended purpose is to display a PIN pad (FeatureAuthByPinCode) in the foreground, while the content visible in the background is the previous route's content (TabsPage) that should not be displayed anymore.
<hr>
Vue-Router: replace()
- not send a new request
- just replaces the current content with the next
- no record of it is made in the browser history
- back button loses its function (that would be the goal if you use replace)
- possible that due to caching, the content of the previous page remains visible (this is not the fault of the page, but of the browser)
Vue-Router: push()
- new entry is added to the browser history
- definitely does not interfere with the cache
- can use back button
Vue-Router: How to can disable current page cache on browser?
Use inhibitCache: true in meta.
This can be helpful in cases where the page's content needs to be updated frequently without relying on the browser's cache. (maybe with replace() using)
const routes = [
// ...
{
path: '/about',
component: ExampleAbout,
meta: {
// disable cache on about route
inhibitCache: true
}
},
// ...
]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论