VUE脚手架router传参动态路由，获取动态路由两种方式，添加子路由及跳转，设置全局局部钩子

1.传参动态路由，获取动态路由两种方式：

App.vue文件：

      点我跳转ChildA--1 |

      点我跳转ChildA--2 |

      点我跳转ChildB |

      点我跳转ChildB |

ChildA.vue文件：

ChildB.vue文件：

router下index.js文件：

{

    /* 动态路由 :id表示一个动态的内容 */

    path:'/ChildA/:id',

    name:'ChildA',

    props:true,

    component: () => import('../components/ChildA.vue')

  },

  {

    path:'/ChildB',

    name:'ChildB',

    component: () => import('../components/ChildB.vue'),

 }

  },

2.添加子路由及跳转：

App.vue文件下：

需要在 router index.js 里面抛出异常：

/* 抛出异常 */

const VueRouterPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (to) {

  return VueRouterPush.call(this, to).catch(err => err)

}

3.设置全局局部钩子：

全局在router index.js 里面设置：

/* 全局路由守卫 每次路由跳转都会执行一遍 */

/* router.beforeEach((to,from,next)=>{

  // to 表示要去的路由

  // from 表示之前的路由

  // next 必须要执行的行数 跳转的方法

  //console.log('to',to);

  console.log('from',from);

  console.log('next',next);

  next()

}) */

/* 监听全局路由离开时触发的钩子函数 */

/* ★ 没有next() */

/* router.afterEach((to,from)=>{

  console.log('to',to);

  console.log('from',from);

}) */

局部设置：

我们在之前的' ChildB '里面设置

{

    path:'/ChildB',

    name:'ChildB',

    component: () => import('../components/ChildB.vue'),

    /* 局部的路由钩子进入路由的时候触发 */

    /* 因为同一个路径参数或者是动态路由,不会触发beforeEnter */

    beforeEnter: (to, from, next) => {

      console.log('to',to);

      console.log('from',from);

      next()

    }

  },