十三：编程式路由导航push和replace,缓存路由组件keep-alive，新的生命周期钩子activated和deactivated，路由守卫，history和hash模式，组件库

最新推荐文章于 2024-04-21 12:45:30 发布

wwnewnewnew

最新推荐文章于 2024-04-21 12:45:30 发布

阅读量293

点赞数

分类专栏： Vue.js 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_45994446/article/details/133808203

版权

本文介绍了Vue.js中的编程式路由导航，包括$router.push和$router.replace，以及如何使用keep-alive进行路由组件缓存。另外，详细讲解了激活与失活的生命周期钩子activated和deactivated。还涵盖了路由守卫的分类和使用，如全局前置和后置守卫，以及独享和组件路由守卫。最后，讨论了history和hash模式的区别，并给出了history模式下刷新报错的解决方案。

摘要由CSDN通过智能技术生成

一.编程式路由导航

作用：不借助router-link实现路由跳转，让路由跳转更灵活；主要是用$router的两个api push，replace实现路由跳转，push是默认带缓存，replace是覆盖缓存

$router.push和$router.replace内数据和to跳转的数据一样

 methods: {
    pushShow(m) {
      this.$router.push({
        name: "xiangqin",
        query: {
          id: m.id,
          title: m.title,
        },
      });
    },
    replaceShow(m) {
      this.$router.replace({
        name: "xiangqin",
        query: {
          id: m.id,
          title: m.title,
        },
      });
    },
  },
};

  methods: {
    back() {
      this.$router.back();//后退
    },
    forward() {
      this.$router.forward();//前进
    },
    test() {
      this.$router.go(-2); //负数为往后退两步，正数为前进几步
    },
  },
};

二.缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁（比如切换时要保留表单数据）。
使用：在放router-view标签的地方，外面包一个<keep-alive></keep-alive>，不加include默认组件都保持挂载，加include后边跟要挂载的组件名字

如上图所示：切换组件News到Message时，News组件被销毁，组件内填的信息都会丢失；为了防止切换组件时信息丢失，这时可以在News展示区即Home组件加上<keep-alive></keep-alive>

     <!-- 保持活跃，使News组件跳转到其他组件时不被销毁，填的信息不被删除 include使只缓存News组件 -->
      <keep-alive :include="News">
        <router-view&

最低0.47元/天解锁文章