Проблема с кровотечением анимации ionic/vue router
Я создаю приложение ionic/vue, и у меня возникла проблема с анимацией при выходе из системы. Заикается анимация при переходе с главной страницы на страницу авторизации
думаю проблема в роутере
введите здесь описание изображения
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'),
},
],
},
вот так выглядят мои маршруты
Я выхожу из TabsPage в PinCodePage
const signOut = () => {
logout();
router.replace('/pinCode');
};
@rozsazoltan мог бы проверить, пожалуйста
Видно ли содержимое компонента FeatureAuthByPinCode, связанного с маршрутом pinCode, на прикрепленной фотографии? Если да, то вложение кода должно быть связано оттуда, так как именно там будет найдена основная причина проблемы.
Попробуйте this.$router.push вместо this.$router.replace. Браузер может создавать помехи, так как использование функции «заменить» не открывает новую страницу, а удаляет текущую и заменяет ее новым запрошенным содержимым. Если ошибка сохраняется при использовании метода push, то причину проблемы следует искать не здесь. --- Или, если вам нужно использовать replace, вы можете отключить кеш браузера: inhibitCache: true в метаданных Route.
Я нашел ошибку. Причина была в том, что фон моей страницы был прозрачным из-за этого, как будто зависла анимация. Я установил белый фон страницы, и все заработало нормально. @rozsazoltan большое спасибо!
Ответы 1
ВАЖНО: В своем ответе я не знаком с исходным кодом, показанным на картинке, поэтому я могу только предположить, что предполагаемой целью является отображение PIN-кода (FeatureAuthByPinCode) на переднем плане, в то время как содержимое, видимое на заднем плане, является содержимое предыдущего маршрута (TabsPage), которое больше не должно отображаться.
Vue-маршрутизатор: replace()
- не отправлять новый запрос
- просто заменяет текущий контент следующим
- запись об этом не делается в истории браузера
- кнопка «назад» теряет свою функцию (это было бы целью, если бы вы использовали замену)
- возможно, из-за кеширования остается видимым содержимое предыдущей страницы (это вина не страницы, а браузера)
Vue-маршрутизатор: push()
- новая запись добавлена в историю браузера
- точно не мешает кешу
- можно использовать кнопку назад
Vue-Router: как отключить кеш текущей страницы в браузере?
Используйте inhibitCache: true в мета.
Это может быть полезно в тех случаях, когда содержимое страницы необходимо часто обновлять, не полагаясь на кеш браузера. (возможно, с использованием replace())
const routes = [
// ...
{
path: '/about',
component: ExampleAbout,
meta: {
// disable cache on about route
inhibitCache: true
}
},
// ...
]
«Ответ на главный вопрос жизни, вселенной и всего… 42». - Предоставьте достаточно исходного кода, чтобы мы могли увидеть, что вы сделали и где можно сделать улучшения. Иначе, на первый взгляд, как бы нет предыстории компонента (?), который вы подняли навстречу всему.