vue-router 二級路由

/**
 * 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>
  `
});