Vue3全家桶 - VueRouter - 【5】声明式导航 与 编程式导航（导航到不同位置 + 替换当前位置 + 路由历史）

一、声明式 与 编程式导航

1.1 导航到不同的位置

• ❗提示：
  • 编程式的 router.push(...) 的语法：
    • 其参数可以是一个字符串，或者是一个描述地址的对象；
    • 如果参数是描述地址的对象的话，其对象中的 path 和 params 不能同时使用；
• 注意：
  • path 和 query 配合使用；
    • query可以是个对象，但是它的属性值不能是对象；
  • name 和 params 配合使用；
    • params可以是个对象，但他的属性值不能为对象；
    • 使用 name 的时候，需要对对应组件的 path 进行改造;
      • 语法：/path/:参数名1/:参数名2/:...；
  • ❌ 写成对象的形式：
    
• 示例展示：
  • 选项式API：

    this.$router.push('/guoMan') // 简单的字符串地址
    
    this.$router.push({ path : '/guoMan' }) // 路径地址对象 path（路由地址）
    
    this.$router.push({ name : 'guoMan' }) // 路径地址对象 name（路由名称）
    
    
    // --------------------- 嵌套路由 -------------------------
    
    this.$router.push('/guoMan/GuoManList') // 简单的字符串地址
    
    this.$router.push({ path : '/guoMan/guoManList' }) // 路径地址对象 path（路由地址）
    
    this.$router.push({ name : 'guoManList' }) // 路径地址对象 name（路由名称）
    
    
    // --------------------- 路径传参 -------------------------
    const id_one = 110
    const id_two = 119
    const id_three = 120
    
    this.$router.push(`/guoMan/${ id_one }`) // 简单的字符串地址
    
    this.$router.push({ path : `/guoMan/${ id_two }`}) // 路径地址对象 path（路由地址）
    
    this.$router.push({ name : 'guoMan' , params: { id_three } }) // 路径地址对象 name（路由名称）
    

  • 组合式API：

    import { useRouter } from 'vue-router'
    
    const router = useRouter()
    
    
    // ====================================================================
    router.push('/guoMan') // 简单的字符串地址
    router.push({ path : '/guoMan' }) // 路径地址对象 path（路由地址）
    router.push({ name : 'guoMan' }) // 路径地址对象 name（路由名称）
    
    
    // --------------------- 嵌套路由 -------------------------
    
    router.push('/guoMan/guoManList') // 简单的字符串地址
    router.push({ path : '/guoMan/guoManList' }) // 路径地址对象 path（路由地址）
    router.push({ name : 'guoManList' }) // 路径地址对象 name（路由名称）
    
    
    // --------------------- 路径传参 -------------------------
    const id_one = 110
    const id_two = 119
    const id_three = 120
    
    router.push(`guoMan/${ id_one }`) // 简单的字符串地址
    router.push({ path : `/guoMan/${ id_two }`}) // 路径地址对象 path（路由地址）
    router.push({ name : 'guoMan' , params: { id_three } }) // 路径地址对象 name（路由名称）
    

• 示例展示：
  

1.2 替换当前位置

• 注意：
  • 也可以在router.push(...)的参数中采用路径地址对象，其路径地址对象中增加一个属性 replace: true；

1.3 路由历史

• 注意：
  • router.go(1)：前进 1 条记录，相当于 router.forword()；
  • router.go(-1)：后退 1 条记录，相当于 router.back()；
  • 如果前进或者后退的步数大与实际的历史记录数，则什么都不会发生；