/**

 * Created by 我 on 2017/12/4.

 */

import Vue from 'vue'     //import导入  Vue(自己起的名) from 从  vue

import Vuerouter from 'vue-router'  //引进路由

//使用vuerouter

Vue.use(Vuerouter);

//console.log(Vuerouter);

//创建局部组件

const Index={

  template:`<div>

            <h2>这是首页</h2>

            <router-view></router-view>

      </div>`,

  //监听路由变化  to是去的路径  from是来的路径

  watch:{

    '$route'(to,from){

      console.log(arguments);

      console.log(to);

    }

  },

  /*beforeRouteUpdate(to,from,next){

    console.log(arguments);

    console.log(next);

  }*/

  beforeRouteUpdate (to, from, next) {

    console.log(arguments);

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

    next()

  },

};

const New={

  template:`<div>

            <h2>这是新闻</h2>

           <router-view></router-view>

  </div>`

};

const Zixun={

  template:`<div>

            <h2>这是资讯</h2>

           <router-view></router-view>

  </div>`,

  //在调用时候没有访问到实例，但可以通过next对其访问

   beforeRouteEnter (to, from, next) {

   console.log(arguments);

   // 在渲染该组件的对应路由被 confirm 前调用

   // 不！能！获取组件实例 `this`

   // 因为当守卫执行前，组件实例还没被创建

     next(vm=>{

       console.log(vm);

     })

   },

   beforeRouteLeave (to, from, next) {

   console.log(arguments);

   // 导航离开该组件的对应路由时调用

   // 可以访问组件实例 `this`

     next()

   }

};

const Hello={

  template:`<h2>这是小首页</h2>`

};

const Xnew={

  template:`<h2>这是小新闻</h2>`

};

//实例路由

const router=new Vuerouter({

  mode:"history",       //mode模式  history  h5里面的方法  hash

  base:__dirname,      // base 文件路径 相对路径    filename 绝对路径

  routes:[             //路由配置

    {path:"/index",/*redirect:"/new",*/alias: '/b', component:Index,   //redirect为重定向命名

      //alias为别名   『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

     ///a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

      children:[

        //动态路由路径以冒号开头

        {path:"/index/hello/:id",component:Hello},

        {path:"/index/hello/:id",component:Hello}

      ]

     },   //关联路由

    {path:"/new",component:New,name:'new',

      children:[          //二级路由

        {path:"/new/xnew",component:Xnew },

        ]

      },

    {path:"/zixun",component:Zixun},

  ]

});

//路由钩子

/*router.beforeEach((to, from, next) => {     //全局的前置守卫

  console.log(arguments);

  //sessionStorage.setItem('user','')

  //sessionStorage.getItem('user')

  next()

});*/

new Vue({

  el:"#app",

  router,     //开启路由

  template:

    `

  <div>

      <ul>

         <li><router-link to="/index">这是首页</router-link>

              <ol>

                <li><router-link to="/index/hello/123">首页1</router-link></li>

                <li><router-link to="/index/hello/234">首页2</router-link></li>

              </ol></li>

         <li><router-link to="/new">这是新闻</router-link>

             <ol>  <!-- 二级路由的内容-->

             <li><router-link to="/new/xnew">这是小新闻</router-link></li>

             </ol>

         </li>

         <li><router-link to="/zixun">这是资讯</router-link></li>

         <router-view></router-view>

         <ul>{{ $route.params.id }}</ul>

      </ul>

  </div>

  `

});