// 全局守卫,前置守卫 在路由跳转之前进行判断
router.beforeEach(async (to, from, next) => {
  //to:可以获取到你要跳转到哪个路由信息
  // from：:可以获取到你从哪个路由来的信息
  // next ： 放行函数 可以放行到指定的路由
  let token = store.state.user.token
  let name = store.state.user.userinfo.name;
  if (token) {
    //用户已经登录了,去login(不让去，停留在首页)
    if (to.path == '/login') {
      next('/')
    } else {
      // 登录去的不是login，
      if (name) {
        next()
      } else {
        // 没有用户信息。派发action ，让仓库存储用户信息 进行跳转
        try {
          await store.dispatch('asyncUserInfo')
          next()
        } catch (e) {
          // token 失效，获取不到用户信息，清除token 重新登录，
          await store.dispatch('asyncUserOut')
        }
      }
 
    }
  } else {
 
    // 未登录不能去 支付 个人中心 去登录页
    let toPath = to.path
    console.log(toPath);
    if (toPath.indexOf('/myOrder') != -1 || toPath.indexOf('/ShopCart') != -1 || toPath.indexOf('/Center') != -1) {
      console.log('未登录');
      //未登录的时候想去而没有去成的信息，存储于地址栏中【路由】
      next('/login?redirect=' + toPath)
    } else {
      console.log('放行');
      next()
    }
 
  }
})

 {
        path: '/Trade',
        component: Trade,
        meta: { show: true },
        beforeEnter: (to, from, next) => {
            //去交易页必须从购物车来
            if (from.path == '/ShopCart') {
                next()
            } else {
                //停留在当前页
                next(false)
            }
 
        }
    },

  //组件内守卫 组件实例还没有被创建
  beforeRouteEnter(to, from, next) {
    if (from.path == "/Pay") {
      next();
    } else {
      next(false);
    }
  },

beforeRouteLeave(to,from,next){
	const answer = window.confirm("你确定要离开吗")
	if(answer){
		next()
    }else {
		next(false)
	}
}

beforeRouteLeave(to,from,next){
	const answer = window.confirm("你确定要离开吗")
	if(answer){
		next()
    }else {
		next(false)
	}
}

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
 
  // 2. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
 
  // 3. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

​

 Vue.directive('focus', {
		// el：指令所绑定的元素，可以用来直接操作 DOM。
		//binding：一个对象，包含以下 property：
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
    });

directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        },
        color: { // 为元素设置指定的字体颜色
          bind(el, binding) {
            el.style.color = binding.value;
          }
        }
	}

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
<input v-focus>

Vue.directive('clickoutside', {
  bind(el, binding) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
       return false 
      }
      
      if (binding.expression) {
        binding.value(e)
      }
    }
    
    el.__vueMenuHandler__ = documentHandler
    document.addEventListener('click', el.__vueMenuHandler__)
  },
  unbind(el) {
    document.removeEventListener('click', el.__vueMenuHandler__)
    delete el.__vueMenuHandler__
  }
})
 
new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    handleHide() {
      this.show = false
    }
  }
})
<div class="main" v-menu="handleHide">
  <button @click="show = !show">点击显示下拉菜单</button>
  <div class="dropdown" v-show="show">
    <div class="item"><a href="#">选项 1</a></div>
    <div class="item"><a href="#">选项 2</a></div>
    <div class="item"><a href="#">选项 3</a></div>
  </div>
</div>