Vue.js 学习笔记(拾捌)

【6月日新计划更文活动】第8天

编程式路由导航

1、作用：不借助 <router-link> 实现路由跳转，让路由更加灵活

2、具体编码：

//$router 的两个 API
methods: {
  pushShow(n) {
    this.$router.push({        //push
      name: "xiangqing",
      query: {
        id: xxx,
        title: xxx,
      },
    });
  },
    replaceShow(n) {
      this.$router.replace({    // replace
        name: "xiangqing",
        query: {
          id: xxx,
          title: xxx,
        },
      });
    },
},

  //$router 上的其他 API
this.$router.back();        // 前进
this.$router.forward();    // 后退
this.$router.go(-2);        // 走跟进设定的步数(前进后退，皆可)

缓存路由组件

1、作用：让不展示的路由保持挂载，不被销毁

2、具体编码：

<keep-alive include="News">
  <!-- include 内是要组件名 -->
  <router-view></router-view>
</keep-alive>