@mrSeller

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

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

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

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

Как лучше реализовать задачу?
  • Вопрос задан
  • 125 просмотров
Пригласить эксперта
Ответы на вопрос 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'),
    }
  ]
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы