Creating per-route guards

We can create per-route guards by using beforeEnter as a method or property directly on the configuration object of a route. For example, take a look at the following:

beforeEnter: (to, from, next) => { ... }
// or:
beforeEnter (to, from, next) { ... }

Let's duplicate our previous Vue app and change the configuration of the routes to use these per-route guards, as follows:

const routes = [
  {
    path: '/page1',
    component: Page1,
    beforeEnter: (to, from, next) => {
      console.log('before entering page 1')
      next()
    }
  },
  {
    path: '/page2',
    component: Page2,
    beforeEnter (to, from, next) {
      console.log('before entering page 2')
      next()
    }
  }
]

You should get the before entering page 1 log on your browser's console when you navigate to /page1 and the before entering page 2 log when you are on /page2. So, since we can apply a guard to the route of a page, what about...