前端之vue编程式路由导航、缓存路由组件

route只是一个规则
router是路由器有绝对的指挥权

使用this.$router跳转路由

push / replace

在方法中,

  methods: {
    
    
    pushShow(message) {
    
    
      // 方式一: **push跳转路由**, 需要制定个命名路由,以及参数对象
      // 将跳转经过存入栈中
      this.$router.push({
    
    
        name: "myDetail",
        params: {
    
    
          id: message.id,
          title: message.title,
        },
      });
    },
    replaceShow(message) {
    
    
      // 方式二: **replace跳转路由**, 需要制定个命名路由,以及参数对象
      // 替代上一个
      this.$router.replace({
    
    
        name: "myDetail",
        params: {
    
    
          id: message.id,
          title: message.title,
        },
      });
    },
  },

手动跳转路由, 甚至可以延迟几秒在跳转, 不在局限于使用<router-link>转换为a链接跳转路由了

forward、back与go

forward、back分别对应 前进一步和后退一步
go前进或后退指定步数
1 前进一步
2 前进二步
-2 后退二步
-1 后退一步

  methods: {
    
    
    back() {
    
    
      // this.$router.back();
      this.$router.go(-2);
    },
    forward() {
    
    
      // this.$router.forward();
      this.$router.go(2);
    },
  },

总结

缓存路由组件

切换组件：将上一个组件销毁，挂载新的
这样上一个页面的操作可能遗失，那么缓存路由组件就是对应的解决方式

在路由页面展示的组件中，用<keep-alive>标签包裹住router-view可以避免路由页面销毁
加上include属性, 指定缓存的组件, include="组件名"

总结:

路由仅有的生命周期钩子

1. 看到的路由页面处于 激活 activated

2. 被替代的路由页面处于 失活 deactivated
   

总结

下一节:前端之vue路由守卫(权限)、路由模式