router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判斷該路由是否需要登錄權(quán)限
        if (cookies('token')) {
            //通過封裝好的cookies讀取token，如果存在，name接下一步如果不存在，那跳轉(zhuǎn)回登錄頁
            next()//不要在next里面加"path:/",會陷入死循環(huán)
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
            })
        }
    }
    else {
        next()
    }
})

//使用鉤子函數(shù)對路由進(jìn)行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
        next('/login');
    }else if(to.meta.permission){
        // 如果是管理員權(quán)限則可進(jìn)入，這里只是簡單的模擬管理員權(quán)限而已
        role === 'admin' ? next() : next('/403');
    }else{
        // 簡單的判斷IE10及以下不進(jìn)入富文本編輯器，該組件不兼容
        if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
            Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', {
                confirmButtonText: '確定'
            });
        }else{
            next();
        }
    }
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    meta:{ isAuth: false, title:"關(guān)于" },
    children:[
    	{
    		path: '/detail',
    		name: 'Detail',
    		component: Detail,
    		meta:{ isAuth: false, title:"詳情" },
    		beforeEnter:(to,from,next) =>{
				if(to.meta.isAuth){
					if(localStorage.getItem('user')){
						next()//調(diào)用next才會往下走
					}
				}else{
					alert("無權(quán)限")
				}
    		}
    	}
    ]
  }
]

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實例 `this`
    // 因為當(dāng)鉤子執(zhí)行前，組件實例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
    // 可以訪問組件實例 `this`
  }

beforeRouteEnter(to, from, next) {
	console.log("beforeRouteEnter");
	next(vm => {
		console.log("vm", vm);  //vm就是當(dāng)前組件this
		console.log("data：", vm.data) // 可以獲取當(dāng)前組件的data
		vm.testFun()   //可以執(zhí)行當(dāng)前組件的方法
	});
}

beforeRouteLeave (to, from, next) {  
 window.clearInterval(this.timer) //清楚定時器   
 next()
 }

beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}