vue3路由传参 query 、params

vue3 中的传参方式和vue2中一样，都可以用query和params传参
不过注意的是，vue2 中是有this的，但是vue3是在setup中进行的，且要引入 useRoute 和useRouter
代码如下
router 文件夹内容不变，在你用cli 创建项目时选中就行，我这里不在展示代码，放一个图看看就好了

看下RouteView 文件的代码

<template><div>给about传参数<button @click="params">params传参</button><button @click="query">query传参</button></div>
</template><script>
import { useRouter } from "vue-router";
export default {setup() {const $router = useRouter();console.log($router, "router");let params = () => {$router.push({name: "About",params: {id: 1,aa: "nini",},});};let query = () => {$router.push({path: "/about",query: {id: 2,age: 13,},});};return {params,query,};},
};
</script><style lang="scss" scoped>
</style>

about页面

不管那种方式都可以正确跳转，且得到传参参数。

import { useRoute } from "vue-router";//引入路由组件
import { onMounted } from "vue";//引入钩子函数
export default {setup() {const $route = useRoute();onMounted(() => {console.log($route.params); //   打印 params 的参数console.log($route.query); //   打印 query 的参数// 这里得到了参数， 就可以做我们接口请求的处理了});},
};

我上边也有用watch 方法监听路由变化，用watch 是方便做监听动态的路由传参，从而使在异步获取API时能够实时监控到路由参数的变化。

当然还有其他的传参方式，后续在做。

vue3路由传参 query 、params相关推荐

Vue路由传参（params 与 query）
理解: 路由传参分为 params 传参与 query 传参,params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).params 只能配合 ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue路由传参的三种方式
目录 1.动态路由传参 2.params传参 3.query传参 1.动态路由传参使用"路径参数"使用冒号 : 标记.当匹配到一个路由时,参数值会被设置到 this.$route ...
react路由传参问题
之前在工作中开发一个react项目的时候遇到路由传参的问题,当时因为基础不好,解决这个问题用了好久,还产生了一个bug,特此记录一下. 项目中路由跳转使用的是hashRouter,由于是详情页面跳到审 ...
vue路由传参的两种方式
项目场景: 例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用跳转方式一般我们有两种方式让路由携带参数 1.路由传参query(path是路由地 ...

vue3路由传参 query 、params

vue3路由传参 query 、params相关推荐

最新文章

热门文章