【动态路由】

【动态路由】

• 文章目录
• 一、动态路由传参
• 二、添加路由
• 三、路由守卫

文章目录

一、动态路由传参

在router文件下的index.js中

 {
    path: '/about/:id',
    name: 'About',
    props:true,
    component: () => import('../views/About.vue')
  },

在RouterPage中

<template>
  <div id="nav">
      <router-link
        v-for="(item,index) in routerList"
        :key="index"
        :to="item.routeUrl"
      >
      {{item.routeName}}&nbsp;&nbsp;
      </router-link>
  </div>
</template>

<script>
export default {
    name:"RouterPage",
    props:['routerList']
}
</script>

在根组件中

<template>
  <div id="app">
    <RouterPage :routerList="routerList"></RouterPage>
    <router-view />
  </div>
</template>
<script>
import RouterPage from '@/views/RouterPage.vue'
export default {
  name: 'Home',
  components: {
    RouterPage
  },
  data() {
    return {
      routerList: [
        {
          routeUrl: '/',
          routeName: 'Home'
        },
        {
          routeUrl: '/about/1',
          routeName: 'About1'
        },
        {
          routeUrl: '/about/2',
          routeName: 'About2'
        },
        {
          routeUrl: '/about/3',
          routeName: 'About3'
        },
      ]
    }
  }
}
</script>

二、添加路由

 使用事件总线方式传值：点击按钮实现添加路由

在mian.js中

Vue.prototype.$bus = new Vue();

再父页面接收 将要被改变的 路由数组

  created() {
    this.$bus.$on('handle',(val)=>{
      this.routeList.push(val)
    })
  },

在my页面点击添加路由按钮实现添加

<button @click="addR">添加路由</button>
 methods: {
    /* 添加路由 */
    addR() {
      this.$router.addRoutes([
        {
          path: "/vip",
          name: "Vip",
          component: () => import("../views/Vip.vue"),
        },
      ]);
      this.$bus.$emit("handle", {
        routeUrl: "/vip",
        routeName: "Vip",
      });
    },
  },

三、路由守卫

全局路由守卫

/* 全局路由守卫 */
/**
 * @param to Object  要去的路由地址信息
 * @param from Object 来自哪个路由的地址信息
 * @param next Function 执行下一步(必须要调用，否则路由会跳转不了)
 */
/* 进入路由的时候触发 是先触发beforeEach 再触发afterEach */
router.beforeEach((to,from,next)=>{
  console.log('beforeEach to',to);
  console.log('beforeEach from',from);
  next();
})
/* 离开路由的时候触发 离开的时候没有next函数 */
router.afterEach((to,from)=>{
  console.log('afterEach to',to);
  console.log('afterEach from',from);
})

局部路由

局部路由钩子函数 只针对当前的路由

{
    path: '/my',
    name: 'My',
    component: () => import('../views/My.vue'),
    /* 局部路由钩子函数 */
    /* 指定进入/my的时候触发 是局部钩子 */
    beforeEnter: (to, from, next) => {
      console.log('beforeEnter to',to);
      console.log('beforeEnter from',from);
      next();
    },

组件内的路由

组件内的路由钩子函数：有三个

 /* 组件内的路由钩子函数 */
  /* 一进入login页面的时候触发 */
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter to", to);
    console.log("beforeRouteEnter from", from);
    /* 在组件钩子函数 进入的时候是获取不到vue实例化对象的 */
    /* 一定要获取vue实例化对象，就在next方法里面传入回调函数的方式实现 */
    next(vm=>{
      console.log("beforeRouteEnter 回调函数 this",vm);
    });
  },
  /* 组件路由更新的时候触发 */
  /* 比如 传参数 ?id=1 比如动态路由 命名路由*/
  beforeRouteUpdate(to, from, next){
    console.log("beforeRouteUpdate to", to);
    console.log("beforeRouteUpdate from", from);
    /* 在组件钩子函数 更新的时候可以获取到vue实例化对象 */
    console.log("beforeRouteUpdate this",this);
    next();
  },
  // 组件离开的时候触发
  beforeRouteLeave (to, from, next) {
    // console.log("beforeRouteLeave to", to);
    // console.log("beforeRouteLeave from", from);
    // /* 在组件钩子函数 离开的时候可以获取到vue实例化对象 */
    // console.log("beforeRouteLeave this",this);
    /* 挽留框 */
    let flag = confirm('你舍得离开我吗?');
    if(flag){
      next();
    }else{
      /* next里面可以传递参数 如果参数是false 表示不跳转 */
      next(false);
    }
  },