Vue (21) — 编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器的两种工作模式

目录

一、编程式路由导航

1.作用

2.具体编码

二、缓存路由组件

1.作用

2.具体编码

三、两个新的生命周期钩子

  1.作用

  2.具体名字

四、路由守卫

  1.作用

  2.分类

  3.全局守卫

  4.独享守卫

  5.组件内守卫

五、路由器的两种工作模式

  1.对于一个url来说，什么是hash值？

  2. hash值不会包含在 HTTP 请求中

  3. hash模式

  4.history模式

---

一、编程式路由导航

1.作用

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

2.具体编码

//$router的两个API
this.$router.push({
        name:'xiangqing',
          query:{
            id:m.id,
            title:m.title
          }
      })

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

this.$router.back()   //前进

this.$router.forward()    //后退

this.$router.go()     //可前进也可后退

二、缓存路由组件

1.作用

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

2.具体编码

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

注意：缓存多个组件时将 include 内容写成数组形式：

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

三、两个新的生命周期钩子

  1.作用

        路由组件所独有的两个钩子，用于捕获路由组件的激活状态

  2.具体名字

            1.