// npm install vue-router 安裝路由

//引進
import Vue from 'vue';
import VueRouter from 'vue-router';
// import demo from '../page/demo'
const demo = () => import('../page/demo');
import HelloWorld from '../page/HelloWorld';
import filter from '../page/filter';
import minixs from '../page/minixs';
//使用
Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path:'/demo',
            name:'demo',
            // component: () => import('../page/demo')
            component:demo,
            meta:{
                title:'例項'
            },
            // 單個路由鉤子
            beforeEnter: (to, from, next) => {
                window.console.log(to)
                window.console.log(from)
                next()
            }
        },
        {
            path:'/helloWorld',
            name:'HelloWorld',
            // component: () => import('../page/demo')
            component:HelloWorld
        },
        {
            path:'/filter',
            name:'filter',
            component:filter
        },
        {
            path:'/minixs',
            name:'minixs',
            component:minixs
        }
    ]
});
//全域性路由鉤子
// router.beforeEach((to, from, next)=>{
//     // 會在任意路由跳轉之前執行，next()一定要執行，不然路由不跳轉
//     window.console.log('to',to)
//     window.console.log('from',from)
//     next()
// })
export default router
/*
1、this.$router與this.$route的區別
this.$router是vue-router的一個例項，是一個全域性路由管理器。包含push(),go()等方法以及子物件等
this.$route是指當前正在跳轉的路由，包含path、name、query、params等屬性

2、配置路由：引進vue vue-router 並且Vue.use(vueRouter)
import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter)

3、例項化一個路由物件
const router = new vueRouter({
 routes:[
  {.......}
 ]
})

4、匯出路由物件 export {router}  或者 export default router

5、引進進行路由跳轉的元件
import demo from '@/components/demo'    @表示同級路徑
然後在routes:[
  {
    path:'/demo',
    name:'demo',
    component:demo      //注意component是沒有s的
  }
]

6、在main.js中做配置
main.js:
import vueRouter from 'vue-router' //引入vue-router並且use
Vue.use(vueRouter)

import router from './router/index'   //引入router資料夾下的index.js 後面是檔案路徑

new Vue({
 router,   //最後一步，記得掛載在根元件下
 render: h => h(App),
}).mount('#app')

7、路由懶載入，當路由被訪問時才載入
const demo = () => import('./page/demo')
const router = new vueRouter({
  routes:[
   {
     path:'/demo',
     name:'demo',
     component:demo
   }
  ]
})
或者寫成：
const router = new vueRouter({
  routes:[
   {
     path:'/demo',
     name:'demo',
     component:()=>import('./page/demo')
   }
  ]
})

8、beforeRouteEnter (to, from, next){
   // 路由元件鉤子
}
總結：常用的：全域性路由鉤子，每個路由都要經過的beforeEach()
單個路由鉤子beforeEnter()
元件路由鉤子 beforeRouterEnter()
* */