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

　　

转载于:https://www.cnblogs.com/zr123/p/8229166.html