Vue3x路由跳转及传参(useRouter)

最新推荐文章于 2024-09-14 19:54:26 发布

小芬熊

最新推荐文章于 2024-09-14 19:54:26 发布

阅读量1.9k

点赞数

分类专栏：前端 html 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_67392010/article/details/123370357

版权

本文介绍了Vue3中的`useRouter`和`useRoute`，它们分别对应Vue2的`this.$router`和`this.$route`。`useRouter`提供全局路由实例，而`useRoute`包含当前路由的状态信息。这两个钩子必须在`setup`函数中使用，否则可能引发`undefined`错误。文章讲解了通过`query`和`params`传递参数的方法，包括有参数链接（如 `/index?id=123&name=nick`）和无参数链接（如 `/index`）的实现。

摘要由CSDN通过智能技术生成

useRouter 相当于vue2的this.$router全局的路由实例，是router构造方法的实例

useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录

import { useRoute, useRouter } from "vue-router"

useRoute, useRouter必须写到setup中,详见vue-next-router.强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法

API Reference | Vue Router

1. 传递参数使用query,path/name都行。（页面链接有参数，即:/indexid=123&name=nick）

2. 传递参数使用name+params（页面链接无参数，即:/index）

// app.vue
import { useRouter } from "vue-router"

setup(){
    const router = useRouter()
    let goto = function () {
      router.push('/index')

      router.push('/index?id=123&name=nick')

      // query 参数
      router.push({
        pat