Vue2 第二十节 vue-router（三）

1.路由跳转的replace方法

2.编程式路由导航

3.缓存路由组件

4.两个新的生命周期钩子

一.路由跳转的replace方法

1.作用：控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录模式有两种写入方式，分别为push和replace,push是追加历史记录，replace是替换当前记录，路由跳转的时候默认为push

3.如何开启replace模式

二.编程式路由导航

① push: 相当于点击路由链接（可以返回到当前路由界面）

this.$router.push({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title,
        },
      })

② replace:用新路由替换当前路由（不可以返回到当前路由界面）

this.$router.replace({
        name: 'xiangqing',
        query: {
          id: m.id, v
          title: m.title,
        },
      })
    }

③ back:请求（返回上一个记录路由）

this.$router.back()

④ forward：请求（下一个记录路由）

 this.$router.forward()

⑤ go 请求几步，正数请求下几步记录路由，  负数请求前几步记录路由

this.$router.go(2)

三.缓存路由组件

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

使用  keep-alive  将 router-view 包裹起来

① 缓存一个路由组件, include指的是组件名

<keep-alive include="News"><router-view></router-view></keep-alive>

② 缓存多个路由组件

<keep-alive :include="['News', 'Message']"
      ><router-view></router-view
    ></keep-alive>

四.两个新的生命周期钩子 --路由组件独有的

① 激活:切换到该组件

activated () {
    console.log('激活')
    this.timer = setInterval(() => {
      console.log('定时器启动')
      this.opacity -= 0.01
      if (this.opacity <= 0) {
        this.opacity = 1
      }
    }, 16)
  }

② 失活：切换到其他组件

deactivated () {
    console.log('失活')
    clearInterval(this.timer)
  }