Router middleware

[VasiliyRusin]

What problem does this feature solve?

Simple middleware out of the box. The idea and realization were shown in this article https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/
And I think it's really good solutions for router middleware.

If it can be realized by existing "beforeEach" hook, Is it really necessary? Yes. It's a beautiful and DRY way to check user authentification or page access rights, logging or A/B tests. Also, it isn't breaking existing code.

What does the proposed API look like?

Example from the article. Maybe the object "meta" isn't necessary. It should be discussed.

 import Vue from 'vue';
 import Router from 'vue-router';
 
 import auth from './middleware/auth';
 import log from './middleware/log';
 
 import Home from './views/Home.vue';
 import Login from './views/Login.vue';
 import User from './views/User.vue';

 Vue.use(Router);

 const router = new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home,
       meta: {
         middleware: log,
       },
     },
     {
       path: '/login',
       name: 'login',
       component: Login,
       meta: {
         middleware: log,
       },
     },
     {
       path: '/user',
       name: 'user',
       component: User,
       meta: {
         // Hint: try to switch those two around to see
         // how this affects execution of the callbacks.
         middleware: [auth, log],
       },
     },
   ],
   mode: 'history',
 });

 export default router;

[posva]

Duplicate of #2688