First, use
全局前置守卫用于在路由配置生效之前进行一些动作，可以使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
parameter:
- to: Route: about to enter the target routing objects
- from: Route: The current route navigation was about to leave
- next: Function: be sure to call this method to resolve this hook. Implementation of the results depend on the method call parameters next.
(1) next (): the next hook pipeline. If all the hook either finished, the status of navigation is confirmed (acknowledged).
(2) next (false): interrupt the current navigation. If the browser's URL has changed (manually by the user or may be the browser back button), then it will be reset to a URL address from an address corresponding to the route.
(3) next ( '/') or next ({path: '/'}): jump to a different address. The current navigation is interrupted, then a new navigation. You can pass next to the object at any position, and provided such as to allow replace: true, name: Option 'home' and the like or any used to prop router.push router-link in the options.
Note: Make sure to call the next method, otherwise the hook will not be resolved.
Second, examples
In addition to entering the login page when other pages often need to determine whether there is a token, if present, can be accessed if there is no need to return to the login page, log in acquiring advanced token, then you can use the front guard carried this work:
In index.js router routing file folder:
// route navigation guard router.beforeEach ((to, from, the Next) => { // to go routing configuration // from the current routing configuration // the Next sure to call, so that the configuration of the route to continue in force, such as If you go to log in directly next (), or to determine whether there is a token, if there is to the Next () IF (to.path === '/ the login') return the Next (); // use the return, no need to write the else // judge Are there other pages token const = localStorage.getItem token ( 'token' ); // presence continue to go back iF (token) return Next (); // the this $ router.push ({name: 'Login'}). # no this, you can not be used Message.warning ( 'not logged in, please login!' ) router.push ({ name: 'the Login' }) });
This eliminates the need for each component corresponding to url determined token, avoid redundancy, if each component beforecreate method requires the use of each component, such as in home components:
// route navigation write this method without guard beforeCreate () { const token = localStorage.getItem ( 'token' ); IF (! Token) { the this $ router.push ({name: 'Login'. }) } },