vue 全局路由守卫

# 全局路由守卫有两种方式

# 第一种是直接在 src => router => index.js 里面修改

原文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})

修改后

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

router.beforeEach((to, from, next) => {
  next();
});

export default router;


# 第二种是在 src => main.js 里面修改

原文件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

修改后

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* 全局路由守卫 */
router.beforeEach((to, from, next) => {
  next();
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

你可能感兴趣的:(vue,vue)