Как во Vue правильно сделать роут только для development-режима?

Question

[mrSeller]

Задача такая: сделать роут, который будет доступен только в development-режиме (т.е. когда переменная в process.env будет === 'development'), но у роута есть дочерние пути.

Попробовал через redirect роута, сделав ее функцией, но такой метод не реагирует, когда происходит переход на дочерний путь.

Была еще идея пушить в массив routes нужный мне путь внутри условия if-else, но как-то очень костыльно + нельзя просто в конец пушить, т.к. в конце роут с path: '*', т.е. дополнительные проблемы, которые надо постоянно учитывать.

Как лучше реализовать задачу?

Comments

[Сергей Соколов]

Собираете webpack'ом?

[mrSeller]

Сергей Соколов, да

[Сергей Соколов]

webpack define plugin поможет при сборке назнать глобальную константу. В коде роутера уже простыми условиями.

[mrSeller]

Сергей Соколов, так у меня есть константа

[Сергей Соколов]

mrSeller, такой вариант?
https://forum.vuejs.org/t/vue-router-route-in-deve...

[mrSeller]

Сергей Соколов, даааа, думал над таким, но он какой-то неказистый

Хочу найти более элегантное решение)

[Сергей Соколов]

mrSeller, можно в дев-роуты добавить ключ типа isDevOnly: true
И фильтровать массив )

Answer 1

[Сергей Соколов]

Предлагаю такой костыль способ:

router.js

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, isDevOnly: true },
  { path: '*', component: Baz },
]

const router = new VueRouter({
  routes: routes.filter(r => DEVELOPMENT || !r.isDevOnly)
})

При сборке назначать эту константу DEVELOPMENT из переменной окружения с помощью DefinePlugin

webpack.common.js

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      DEVELOPMENT: JSON.stringify(process.env.mode === 'development'),
    }
  ]