Кнопка «назад» в приложении на Vue?

Question

[Николай Семенов]

Всем, привет.
Есть необходимость появлять в мобильном приложении кнопку назад при условии что роутер имеет вложенность подобной этой(выделено): app/#/profile/my-promo и больше.
Уважаемые коллеги подскажите где можно про это почитать, разобрать пример

Answer 1

[Evgeny Kulakov]

См. router.go(n): https://router.vuejs.org/ru/essentials/navigation.html

Comments

[Николай Семенов]

да, с этим понятно. я прежде почитал. не понятно когда ее показывать (как оределить что маршрут уже вложенный, ну т.е показать только в этот момент).
пришел к выводу что нужно получить путь(path). разбить строку по '/' и если массив больше скажем 2 показывать кнопку

[Evgeny Kulakov]

Николай Семенов: возможно $route.matched поможет определить когда показывать.

[Николай Семенов]

Evgeny Kulakov: пробовал. его дина почему то не меняется при переходах

[Николай Семенов]

Evgeny Kulakov: хотя может я чего напутал

[Evgeny Kulakov]

Вроде должно) делаете слежение за $route, если вложенность больше 1, т.е. $route.matched.length > 1, то показать кнопку.

[Николай Семенов]

Evgeny Kulakov: с $route.matched.length>1 не получилось, не стал разбираться почему. в динамических дочерних компонентах вроде работало условие > 2, а при статике длина не увеличивалась. ставишь >1 показывает везде.
в computed добавил функцию:

lengthPath() {
            const path = this.$route.path;
            return path.split('/').length
        }

и условие v-if=" lengthPath > 2"
работает везде как зингер))

[Evgeny Kulakov]

Ок, прикол скорее всего в том, что длина массива увеличивается если используется вложенность в роутинге, т.е. если используетсяс children. А если путь в роутере задается как "foo/bar/baz", то будет один объект.

[Николай Семенов]

Evgeny Kulakov: в том-то весь и прикол)), я тоже так понял из описания, но вот мой роут

export const routes = [

// menu navigation

    { path: '/', redirect: '/menu' },
    { path: '/menu', component: MenuPage, children: [
        
        { path: '', component: CategoriesPage, meta: { location: 'Меню' }},
        { path: 'search', component: SearchProductPage, meta: { location: 'Поиск' } },
        { path: ':categoryId', component: CategoryPage, children: [
            { path: '', component: ProductsPage, meta: {bcDynamic: true, bcGetter: 'activeCategory', bcText: category =>  category.title,} },
            { path: ':productId', component: ProductPage, meta: { bcDynamic: true, bcGetter: 'activeProduct', bcText: product => product.title} }
        ] }
    ] },

// profile navigation

    { path: '/profile', component: ProfileViewPage,  children: [
            { path: '', component: ProfilePage,  meta: { location: 'Профиль' }},
            { path: 'my-data', component: UserDataPage, meta: { location: 'Личные данные' }},
            { path: 'my-orders', component: UserOrdersPage, meta: { location: 'Мои заказы' }},
            { path: 'my-notice', component: UserNoticePage, meta: { location: 'Уведомления' } },
            { path: 'my-promo', component: UserPromoPage, meta: { location: 'Промокод' } },
            { path: 'my-feedback', component: UserFeedbackPage, meta: { location: 'Контакты' } },
            ]},

    { path: '/login', component: LoginPage,  meta: { location: 'Авторизация' } },
    { path: '/registry', component: RegistryPage,  meta: { location: 'Регистрация' } },

// ordering navigation

    { path: '/ordering', component: CartViewPage, children: [
        { path: '', component: CartPage, meta: { location: 'Корзина' }},
        { path: 'order', component: OrderPage, meta: { location: 'Заказ' }},
        { path: 'addresses', component: AddressesPage, meta: { location: 'Адрес' }},
        { path: 'address', component: AddressPage,  meta: { location: 'Адрес' }},
        { path: 'restaurants', component: ChooseRestaurantPage,  meta: { location: 'Выбирете ресторан' }},
        { path: 'summary', component: SummaryOrderPage,  meta: { location: 'Оформление' }},
        { path: 'status', component: StatusOrderPage,  meta: { location: 'Заказ' }},
    ] },

// discounts navigation

    { path: '/promo', component: DiscountsPage, children: [
        { path: '', component: DiscountsListPage,  meta: { location: 'Акции' } },
        { path: ':promoId', component: PromoDetailPage,  meta: { bcDynamic: true, bcGetter: 'activeDiscount', bcText: discount => discount.title} }
    ] },

// restaurants navigation

    { path: '/restaurants', component: RestaurantsViewPage, children: [
        { path: '', component: RestaurantsPage, meta: { location: 'Рестораны' }},
        { path: ':restaurantId', component: MapRestaurantsPage, meta: {location: 'Как проехать'}}
    ] }
];

и не канает))

[Evgeny Kulakov]

Хм, странно.. попробовал на тестовом примере, вроде корректно работает... ну ладно)