vue3 vue-router编程式导航（二）

Vue Router提供了强大且灵活的编程式导航功能，能够通过代码来控制路由的切换和跳转。本篇博客将介绍如何在Vue 3应用程序中使用Vue Router进行编程式导航。

一、跳转到指定路径

当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...)

声明式	编程式
<router-link :to="...">	router.push(...)

注意：params 不能与 path 一起使用

传参的两种方式

1. query传参

• 查询参数: 使用query传递的参数会以?开头附加在URL中，例如 /user?id=123。
• 可以在同一路由上反复使用: 查询参数可以在同一路由上多次使用。
• 访问方式: 通过this.$route.query来获取参数。

使用：

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();

const toHome = () => {
  router.push({
    path: "/home",
    query: {
      name: "qiyan",
    },
  });
};

</script>

获取参数

//home
<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.name);   //qiyan
</script>

2. Params传参

• 路径参数: 使用params传递的参数是直接嵌入在路由路径中的，例如 /user/:id。
• 动态路由参数: 定义动态路由时，可以通过params传递参数，例如 :id。
• 访问方式: 通过this.$route.params来获取参数。

使用：

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();

const toAbout = () => {
  router.push({
    name: "about",
    params: {
      id: "123",
    },
  });
};
</script>

定义路由：

{
    path: "/about/:id",
    name: "about",
    component: () => import("@/views/about/index.vue"),
  },

获取参数

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params.id);
</script>

二、前进/后退

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。

//返回上一页
router.back()

//前进一页
router.forward()

//前进后退几页
router.go(n)   //n可以为负值，为负值时代表后退

三、替换当前页

导航时不会向 history 添加新记录

声明式	编程式
	router.replace(...)

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })