How to properly route in Vue for development mode only?

Question

Vue.js

The goal is to make a route that will only be available in development mode (i.e. when the variable in process.env is === 'development'), but the route has child paths.
I tried using the redirect of the route, making it a function, but this method does not react when a transition occurs to the child path.
There was also an idea to push the path I needed inside the if-else condition into the routes array, but somehow it’s very crutch + you can’t just push to the end, because at the end of the route with , i.e. additional issues to keep in mind. What is the best way to implement the task? path: '*'

Answer 1

I propose such a crutch method:
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)
})

When building, assign this constant DEVELOPMENTfrom an environment variable using DefinePlugin
webpack.common.js

const webpack = require('webpack');

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