Vue3全家桶笔记 - 导航

一、声明式与编程式导航

1.1 导航到不同的位置

声明式	编程式	描述
`<router-link to="..."></router-link>`	【选项式API】：`this.$router.push(...)` 【组合式API】： `useRouter().push(...)`	会向 `history`栈（浏览器的路由栈）中添加一个新的记录，所以，当用户点击浏览器回退按钮时，会回到之前的 `URL`

❗提示：
- 编程式的 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-link to="xxx" replace></router-link>`	【选项式】`this.$router.replace(...)` 【组合式】`useRouter().replace(...)`	作用类似于`push(...)`唯一不同的是：它在导航时不会向`history`栈中添加新纪录，只是取代了当前的条目

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

1.3 路由历史

选项式	组合式	描述
`this.$router.go(n)`	`useRouter().go(n)`	该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

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

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

Vue3全家桶笔记 - 导航

Vue3 笔记导航：

Vue-Router笔记导航：

Pinia笔记导航：

Axios 笔记导航

一、声明式 与 编程式导航

1.1 导航到不同的位置

1.2 替换当前位置

1.3 路由历史

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

一、声明式与编程式导航