Uncaught typeerror: cannot red properties of undefined (reading 'beforeeach') solution

notes ： This is a small problem I encountered when building the project framework in my work , Share the solution

1、 Specific error report ： The page is always blank , And report the following error

 2、 Cause analysis ：

After I think carefully , The discovery is mine router.beforeEach Written in the definition router Before

3、 Solution

Only need to router.beforeEach Write in definition router after , This can solve the above problems .

The following is how to solve the error reporting code , By the way, a logic of login permission function is attached .

4、 Specific code

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// introduce cookie Tool class 
import { getToken } from '../utils/cookie'
// Set up a white list   The routes in the white list can be accessed without login 
var whiteArr = ['/login','/register','/adminLogin'];
//  Login permission function 
router.beforeEach((to,from,next) => {
  //  Current route 
  var path = to.path;
  //  Get token
  var token = getToken('token');
  if (token) { //  Yes token Indicates that you are logged in 
    if (path == '/login') { //  If it's the landing page 
      next('/');  //  Go to the home page 
    }
    //  If not on the landing page , Send a request to get basic user information , generate menu , Production permission   To be done ！！！
  } else { //  No, token No sign in 
    if (whiteArr.includes(path)) { //  The current route is in the white list 
      next();  //  release 
    } else { //  Not on the white list 
      next('/login'); //  Go to login 
    }
  }
  next();
})