Vue3 路由跳转与参数获取

最新推荐文章于 2024-07-17 20:15:37 发布

前端技术栈

最新推荐文章于 2024-07-17 20:15:37 发布

阅读量1k

点赞数 2

文章标签： java vue leetcode react javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MzU5NzA0NzQyNg==&mid=2247485080&idx=1&sn=8aba470e328c8136d77d4e8dd19e4c9e&chksm=fe582775c92fae63db8de14136240f4fd9f213cb9b6a229f3479dbba086fde1154a9e54d4448&scene=126&&sessionid=0

版权

本文介绍了在Vue.js应用中如何使用`vue-router`库进行路由跳转和参数获取。首先通过`useRouter`获取路由实例，然后调用`push`方法实现页面跳转并传递参数。另一方面，通过`useRoute`获取当前路由信息，可以方便地读取查询参数，例如`route.query.type`。这些基础操作对于构建单页应用至关重要。

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

路由跳转

import { useRouter } from "vue-router"
export default {
  setup () {
    const router = useRouter(); // 第一步
    const state = reactive({
      list: [],
      toDeatil(id) {
        router.push('/product?id=' + id); // 第二步
      },
    })
    return {
      ...toRefs(state)
    }
  }
}

参数获取

import { useRoute } from "vue-router"
export default {
  setup () {
    const route = useRoute(); // 第一步
    console.log(route.query.type); // 第二步
    
    const state = reactive({
      list: [],
    })
    return {
      ...toRefs(state)
    }
  }
}