import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
 
Vue.use(VueRouter)
 
const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: 'message', //此處不要寫成：/news
        component: Message
      }
    ]
  },
  {
    path: '/about',
    name: 'aboutName',
    component: About,
    children: [{ //通過children配置子級(jí)路由
      path: 'news', //此處不要寫成：/news
      component: News
    }]
  }
]
 
const router = new VueRouter({
  routes
})
 
//全局前置路由守衛(wèi)---初始化的時(shí)候被調(diào)用、每次路由切換的時(shí)候被調(diào)用
router.beforeEach((to, from, next) => {
  console.log(to);
  //這里是一個(gè)簡(jiǎn)單的例子
  //即判斷用戶是否進(jìn)入了需要鑒權(quán)的路由下（這里距離為news和message）
  if (to.path == '/home/message' || to.path === '/about/news') {
    //如果進(jìn)入了，那就判斷本地是否緩存了信息（這里模擬登錄的token)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  }else{
    //如果不是，則直接放心即可
    next()
  }
})
export default router

//使用meta
router.beforeEach((to, from, next) => {
  console.log(to);
  if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  } else {
    next()
  }
})

//全局后置路由守衛(wèi)---初始化的時(shí)候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title || '路由跳轉(zhuǎn)舉例'//修改網(wǎng)頁的title
  }else{
    document.title = 'vue_test'
  }
})

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

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