Vue: Навигация по заголовку в приложении. vue, но изменена ли она в разных представлениях? - PullRequest
Новая
       17

Vue: Навигация по заголовку в приложении. vue, но изменена ли она в разных представлениях?

1 голос
/ 06 мая 2020

Я застрял в поиске лучшего способа управления навигацией по заголовку в Vue 2, vuex с VueRouter. В моем приложении есть основная навигация типа «заголовок». vue

    <div id="nav">
      <!--Try and create a dynamic nav-->
      <span v-for="route in routes" :key="route.to">
        <router-link :to="`${route.to}`">{{route.text}}</router-link> |
      </span>
    </div>
    <b-container>
      <router-view />
    </b-container>
  </div>

Я надеялся, что пользователь перемещается по странице и в другие представления и компоненты внутри представлений. Чтобы я мог обновить массив 'routes' до pu sh текущего местоположения, в котором они находятся. Очевидно, это очень не Vue, поскольку для этого потребуется какая-то глобальная переменная. Мне было любопытно, лучше ли go обновить навигацию заголовка, когда вы работаете с вложенными маршрутами.

Пример маршрутов: 

  {
    path: '/Teams',
    name: 'Teams',
    component: Teams
  },
  {
    path: '/:teamName/Athletes',
    name: 'Athletes',
    component: Athletes
  },
  {
    path: '/:teamName/Athletes/:id',
    name: 'Athlete',
    component: Athlete
  }

Я бы хотел, когда вы находитесь на странице спортсмена, вы можете вернуться к спортсменам в приложении. vue header nav, то есть динамический c с selected: teamName. Его можно удалить и добавить при необходимости.

Пример пользовательской истории: / Teams-> Выбирает команду «Team1» -> Отправляет их в / Team1 / Atheltes -> нажимает на спортсмена -> отправляет их в / Team1 / Спортсмен / 1. В заголовке nav (который находится в приложении. vue), как я могу добавить ссылку на маршрутизатор, чтобы включить соответствующий ': teamName', чтобы иметь возможность go обратно в / Team1 / Athletes?

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Похоже, использование Vuex упростит вашу работу:

Поместите ваши маршруты в состояние: 

// ...
state: {
  routes: [{
    path: '/Teams',
    name: 'Teams',
  }]
}

/ Teams-> Просто удалите другие маршруты, которые можно добавить. 

// ...
mutations: {
  deafultRoute(state, payload) {
    state.routes = state.routes.slice(0, 1); // Be sure to have only 1 route
  }
}

/ Team1 / Atheltes -> Добавьте командный маршрут для команды: 

// ...
mutations: {
  addTeamRoute (state, payload) {
    state.routes = state.routes.slice(0, 2); // Be sure to have only 2 routes
    let newPAth = {
      path: `/${payloadteamName}/Athletes`,
      name: 'Athletes'
    }
    state.routes[1] = newPAth 
  }
}

/ Team1 / Athlete / 1. -> Добавьте командный маршрут для команды: 

// ...
mutations: {
  addAthleteRoute (state, payload) {
    state.routes = state.routes.slice(0, 3); 
    let newPAth = {
      path: `/${payload.teamName}/Athletes/${payload.id}`,
      name: 'Athlete'
    }
    state.routes[2] = newPAth 
  }
}

Я думаю, вам не нужно сохранять Component в массиве маршрутов.

0 голосов
/ 06 мая 2020

Я делаю что-то вроде этого: 

{
    path: '/Teams',
    name: 'Teams',
    component: Teams,
    meta: {
      module:'Teams'
    }
  }

Затем вы можете использовать свойство meta для направления своей «спины» (среди прочего)

...