Объединять два routers в VueJS

я создаю приложение , что в действительности серия маленьких приложений. Моя цель состоит в том, чтобы изолировать их одни из других. Мое главное препятствие в этом моменте это маршруты.

В этом моменте у меня есть единственный файл маршрутов, что это оказывается более или менее так:

export default new Router({
  routes: [
    {path: '/', name: 'portadaIndex', component: portadaIndex},

    // Rechazos
    {path: '/rechazos', name: 'rechazosIndex', component: rechazosIndex},
    {path: '/rechazos/conjuntos/', component: conjuntoIndex, name: 'conjuntoIndex'},
    {path: '/rechazos/conjuntos/:id', component: conjuntoDetail, name: 'conjuntoDetail'},

    // Login
    {path: '/login', name: 'Login', component: Login}
  ]
})

Мое намерение состоит в том, чтобы у каждого приложения был его собственный router, например:

import Vue from 'vue'
import Router from 'vue-router'
import rechazosIndex from './rechazos.index'
import conjuntoIndex from './conjuntos.index'
import conjuntoDetail from './conjuntos.detail'

Vue.use(Router)

const rechazosRouter = new Router({
  routes: [
    // Rechazos
    {path: '/rechazos', name: 'rechazosIndex', component: rechazosIndex},
    {path: '/rechazos/conjuntos/', component: conjuntoIndex, name: 'conjuntoIndex'},
    {path: '/rechazos/conjuntos/:id', component: conjuntoDetail, name: 'conjuntoDetail'}
  ]
})

export default rechazosRouter

Потом я хочу импортировать это и добавить это каким-то образом к главному router. Моя надежда состоит в том, чтобы что-то как это функционировало, но нет.

import Vue from 'vue'
import Router from 'vue-router'
import portadaIndex from '../components/portada.index'
import Login from '../components/login/Login'
import rechazosRouter from '../components/rechazos/rechazos.router'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', name: 'portadaIndex', component: portadaIndex},

    // Login
    {path: '/login', name: 'Login', component: Login}
  ] + rechazosRouter.routes
})

Здесь я получаю ошибку, которую он говорит:

Uncaught TypeError: routes.forEach is not a function

Также я попробовал добавлять это внутри Router.routes но также оно не функционировало.

Uncaught TypeError: Cannot read property 'path' of undefined

Вопрос

Возможно объединять rechazosRouter.routes с router из-за default? Если это так, как я могу объединять их?

1
задан 31.03.2017, 22:11
2 ответа

По отношению к себе не могут иметь два объекта Router в .

Однако альтернатива очень элегантная.

Использует оператора destructuraci¦n , идентифицированный тремя точками ... (что hab¦ - в использованный, не понимая этого cabalmente).

действующий Восток возвращает элементы остальные из array, а именно, те, которые не были распределены в destructuracion .

  • Сначала, мы делаем array или договоренности объектов, которые мы могли бы перемещать его в объект Router .

    AdemÃ: s маршрута и компонента, мы можем показывать имя и свойства. Или лучше aún, как предлагает благоразумно @Gustavo Garc¦ - a , использовать укрытые совещания. Пока, мы используем эти простые маршруты.

    import rechazosIndex from './rechazos.index'
    import conjuntoIndex from './conjuntos.index'
    import conjuntoDetail from './conjuntos.detail'
    
    export default [
      {path: '/rechazos', component: rechazosIndex},
      {path: '/rechazos/conjuntos/', component: conjuntoIndex, name: 'conjuntoIndex'},
      {path: '/rechazos/conjuntos/:id', component: conjuntoDetail, name: 'conjuntoDetail', props: true}
    ]
    

    Оператор ... способствует тому, чтобы элементы, которые не были распределены в предварительном reestructuraci¦n, а именно, оставшаяся часть или остальные элементы (в этом случае, всех ) произошли с array, отец, которого в примере routes.

  • Мы Делаем то же самое для маршрута исходной страницы и для маршрутов, использованных в acreditaci¦n.

    В portada.routes.js мы имеем:

    import portadaIndex from './portada.index'
    
    export default [
      {path: '/', name: 'portadaIndex', component: portadaIndex}
    ]
    

    И в index.routes.js мы можем видеть: import Login from './Login'

    export default [
      {path: '/login', name: 'Login', component: Login}
    ]
    

В конце концов, конечный результат этот

import Vue from 'vue'
import Router from 'vue-router'

import portadaRoutes from '../components/portada.routes'
import rechazosRoutes from '../components/rechazos/rechazos.routes'
import authRoutes from '../components/login/auth.routes'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ...portadaRoutes,
    ...rechazosRoutes,
    ...authRoutes
  ]
})

, Который что quer¦-хозяева находить.

PD: Ответ - lcdss в форумах VueJS.

0
ответ дан 24.11.2019, 10:16

У тебя нет из-за qué писать router из-за каждого главного унифицированного указателя ресурса. Vue.js выносит укрытые маршруты; это, иметь главный endpoint и под этой, иметь столько маршрутов, как ты нуждался посредством свойства children. Например:

const router = new VueRoute({
  mode: 'history', // para usar la History API
  routes: [
    {
      path: '/',
      component: PortadaIndex,
      children: [
        {
          path: '/rechazos',
          component: RechazosIndex,
          children: [
            {
              path: '/conjuntos',
              component: ConjuntoIndex,
              children: [
                {
                  path: '/:id',
                  component: ConjuntoDetail
                }
              ]
            },
            {
              path: '/otraruta',
              component: OtraRuta
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

важен, чтобы, у каждого составляющего отца, как PortadIndex и RechazosIndex и ConjuntoIndex был один router-view для того, чтобы дети rendericen all¦-:

<template>
  ...
  <transition name="fade">
    <router-view></router-view>
  </transition>
  ...
</template>
1
ответ дан 24.11.2019, 10:16
  • 1
    Так как твой ответ отвечает на другой вопрос, который он очень скоро задаст, muchí пропасти спасибо. Но мой intenció n продолжает быть тем же самым, хотя в каких-то приложениях он использует nested views , я gustarí по отношению к которому каждая имела Ваши router . В Джанго, así он делается и мне кажется хорошей одной prá ctica. Но возможно то, что я хочу, не было возможным. – toledano 01.04.2017, 18:01

Теги

Похожие вопросы