next()//直接進(jìn)to 所指路由
next(false) //中斷當(dāng)前路由
next('route') //跳轉(zhuǎn)指定路由
next('error') //跳轉(zhuǎn)錯誤路由

router.beforeEach((to, from, next) => {
? ? ? //我在這里模仿了一個獲取用戶信息的方法
? ?let isLogin = window.sessionStorage.getItem('userInfo');
? ? ? if (isLogin) {
? ? ? ? ? //如果用戶信息存在則往下執(zhí)行。
? ? ? ? ? next()
? ? ? } else {
? ? ? ? ? //如果用戶token不存在則跳轉(zhuǎn)到login頁面
? ? ? ? ? if (to.path === '/login') {
? ? ? ? ? ? ?next()
? ? ? ? ?} else {
? ? ? ? ? ? ?next('/login')
? ? ? ? ?}
? ? ?}?
?})

router.afterEach((to,from)=>{ //這里不接收next
? ? console.log(to);
? ? console.log(from);
})

import Router from 'vue-router'
Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

//全局路由前置守衛(wèi) --路由攔截
router.beforeEach((to, from, next) => {
  // to  將要前往的路由
  //from 從哪個路由過來的
  //next(path) 是一個函數(shù)  表示繼續(xù)執(zhí)行下一步，強(qiáng)制執(zhí)行前往的path 路由
 
  //如果前往login 頁面  則不需要token 直接進(jìn)入就可以
  if (to.path === "/login") return next();
 
  //獲取token
  const TOKEN = window.sessionStorage.getItem("TOKEN");
  if (!TOKEN) {
    //token 不存在  name 意味著 沒有進(jìn)行登錄  返回登錄頁面
    next({ path: "/login" });
  }
  //已經(jīng) 存在TOKEN  name 就可以進(jìn)行
  next();
});