vue中页面跳转拦截器的实现方法

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)


const routes = [
 {
 path: '/',
 name: "欢迎",
 meta: {
   requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
  },
 component: resolve => require(["../components/Hello.vue"], resolve)
 },
 {
 path: '/login',
 name: "登录",
 /*meta: {
   requireAuth: false, // 添加该字段，表示进入这个路由是需要登录的
  },*/
 component: resolve => require(["../view/login/login.vue"], resolve)
 }
]


export default new Router({
 base: "/",
 routes
})

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if (store.state.token) { // 通过vuex state获取当前的token是否存在
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
})

<script>
export default {
 methods:{
 login(){
  this.$store.commit('setToken','true');  //改变token状态
  let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 获取登录成功后要跳转的路由。
  this.$router.push({
  path: redirect
  })
 }
 }
}
</script>