vue-router路由传参的两种方式（params 和 query ）

于 2024-12-24 16:34:39 发布
阅读量1.6k 收藏 7
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74825746/article/details/144697697
版权

一、vue-router路由传参问题

1、概念：
A、vue 路由传参的使用场景一般应用在父路由跳转到子路由时，携带参数跳转。
B、传参方式可划分为 params 传参和 query 传参；
C、而 params 传参又可分为在 url 中显示参数和不显示参数两种方式；
D、即vue路由传参的三种方式：query传参（显示参数）、params传参（显示参数）、params传参（不显示参数）

2、常见场景：
A、点击列表详情，跳转到详情内页，传递id参数获取详情数据。
B、在输入框输入内容后，点击搜索，跳转到搜索页面，并把输入的内容一起带到搜索页面

方式一：query传参（显示参数）

query 传参（显示参数）可分为 声明式 和 编程式 两种方式

1、声明式 router-link

该方式也是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名 （name 属性）

最低0.47元/天 解锁文章
m0_74825746
关注
vue-router路由传参的几种方式-案例
JackieDYH的博客
08-25 4327
说明 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据 刷新页面参数丢失 编程式导航 方法一：通过 params 传参 路由配置如下 { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { this.$router..
vue-router中query与params区别
weixin_43550562的博客
08-17 974
query和params两者都是在Vue路由中传参 用法： query用path来引入，params只能用name来传递，不能使用path 1.query方式传参和接收参数 //传参 this.$router.push({ path:'/xxx' query:{ id:id } }) //接收参数 this.$route.query.id 传参是this.router，接收参数是this.router，接收参数是this.router
vue-router（params，props，query）
qq_60976312的博客
12-23 1070
vue-router（params，props，query） 路由的query参数 路由params参数 路由的props配置 router-link的replace属性 编程式路由导航 缓存路由组件 两个新的生命周期钩子
vue-router： 路由传参
热门推荐
02-04 4万+
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="
vue2进阶篇：vue-router之路由的params参数
刘大猫
07-09 8225
vue2进阶篇：vue-router之路由的params参数
Vue路由传参（params 与 query）
H524268015wsw的博客
11-23 1万+
问题一：name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”，如图定义路由 方式一：通过 params 传参页面一：声明式：router-link to 以对象形式跳转 页面二：接收用 this.$route.params.+传过来的“name” 在控制台可以看见传参是否成功：通过 params 传参有一个缺点，就是刷新页面就获取不到参数了。 方式二：通过 query 传参页面一：声明式：router-link to 以
浅谈vue-router 路由传参的方法
08-28
`$route` 对象提供了多种方式来获取路由参数，例如 `$route.params`、`$route.query` 等。 ### 1. 使用 `$route.params` 获取路由参数 在 vue-router 中，我们可以使用 `$route.params` 来获取路由参数。例如，在...
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。...vue-router传参两种方式：params和query params、query是什么？  params：/router1/:id ，/router1/1
vue-router 路由传参用法实例分析
10-15
首先，路由传参主要分为两种方式：查询参数和命名参数。 1. **查询参数**： 查询参数是在 URL 查询字符串中传递的，以 `?` 开头，例如 `/list?id=001`。这种方式比较直观，但参数会显示在浏览器的地址栏中。在 Vue ...
vue-router注意事项
m0_52348737的博客
09-13 189
用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。 router-link router-link# 请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这
Vue Router路由传参
kwame211的博客
09-08 224
1、第一种方法：拼接方式: methods：{ v_test(id) {//直接调用$router.push 实现携带参数的跳转 ?this.$router.push({path: `/detail/${id}`,}) } 对应路由配置： { path:'/detail/:id', name:'detail', component: detail }?获取参数方式：?this.$route.params.id 2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由
vue-router 路由传参
m0_50163856的博客
02-15 351
安装 npm install vue-router main.js修改 import Vue from 'vue' import App from './App.vue' import VueRouter from "vue-router" // 变量名只能用router import router from "./router/index" Vue.config.productionTip = false; Vue.use(VueRouter); new Vue({ render: h =&
Vue-router路由传参
最新发布
蓝朽的小世界
08-16 359
vue路由传参
vue-router--路由传参--param传参
qq_43470725的博客
06-19 3255
vue-router
vue-router路由参数（params和query）
lzzw的学习之路
06-15 7774
vue-router路由参数（params和query）
Vue的Router路由传参
aixian4201的专栏
07-05 187
一、文件结构 二、vue.js 打开此链接https://cdn.bootcss.com/vue/2.6.10/vue.js　 复制粘贴页面的所有内容 三、vue-router.js 打开此链接　https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js 复制粘贴页面的所有内容 四、index...
关于路由传参query/params
yms869的博客
09-25 481
关于路由传参query/params
vue-router路由传参
04-25
好的，我理解了你的问题。在Vue.js中使用vue-router进行路由传参的方式有多种，以下是其中一种常见的方式： 1. 使用params传参 通过params传参，即在url中动态添加路由参数，可以在路由组件中通过 $route.params 访问参数。例如： 定义路由： ``` { path: '/user/:id', component: User } ``` 在代码中跳转并传递参数： ``` this.$router.push({ path: '/user/' + userId }) ``` 在User组件中获取参数： ``` this.$route.params.id ``` 2. 使用query传参 通过query传参，即在url中添加查询参数，可以在路由组件中通过 $route.query 访问参数。例如： 定义路由： ``` { path: '/user', component: User } ``` 在代码中跳转并传递参数： ``` this.$router.push({ path: '/user', query: { id: userId }}) ``` 在User组件中获取参数： ``` this.$route.query.id ``` 这是其中两种常见的路由传参方式，你可以根据具体场景选择合适的方式。希望能对你有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值