router传参的多种方式

最新推荐文章于 2024-04-11 02:28:33 发布
最新推荐文章于 2024-04-11 02:28:33 发布
阅读量827 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46104134/article/details/108061331
版权

router传参的多种方式

  1. 方式1
    Login.vue中（需要页面跳转的组件）

this.$router.push("/index?account="+this.account);//方式1

index.vue中（跳转后接收参数的组件）

account:this.$route.query.account,//方式1的获取方式

  1. 方式2
    Login.vue中（需要页面跳转的组件）

this.$router.push("/index/1952683834);//方式2

router/index.js中（路由的路径需要配置）

path: '/index/:qqId ’

index.vue中（跳转后接收参数的组件）

qqId:this.$route.params.qqId//方式2的获取方式

  1. 结合方式1和方式2
    Login.vue中（需要页面跳转的组件）

this.$router.push("/index/1952683834?account="+this.account);//结合方式1和方式2

router/index.js中（路由的路径需要配置）

path: '/index/:qqId ’

index.vue中（跳转后接收参数的组件）(接收两个参数)

account:this.$route.query.account,//方式1的获取方式

qqId:this.$route.params.qqId//方式2的获取方式

更常用的方式:分开写（4-7）
4. 类似方式1（使用path和query）
Login.vue中（需要页面跳转的组件）

this.$router.push({path:"/index",query:{account:this.account}});//使用path和query

index.vue中（跳转后接收参数的组件）

account:this.$route.query.account,//方式1的获取方式

  1. 类似方式1（使用name和query）(name较path更方便)
    Login.vue中（需要页面跳转的组件）

this.$router.push({name:“index”,query:{account:this.account}});//使用name和query（name需要在路由中命名）

router/index.js中（路由中添加name）

name: ‘index’,

index.vue中（跳转后接收参数的组件）

account:this.$route.query.account,//方式1的获取方式

  1. 类似方式2（使用name和params）
    Login.vue中（需要页面跳转的组件）

this.$router.push({name:“index”,params:{account:this.account}});//使用name和params（name需要在路由中命名,params需要在路由的路径中写上）

router/index.js中（路由的路径需要配置）

path: '/index/:account ’

index.vue中（跳转后接收参数的组件）

account:this.$route.params.account

  1. Props方式-支持路由传参（结合方式6）（只能对params的方式使用）
    Login.vue中（需要页面跳转的组件）

this.$router.push({name:“index”,params:{account:this.account}});//使用name和params（name需要在路由中命名,params需要在路由的路径中写上）

router/index.js中（路由的路径需要配置；props支持传参添加上）

path: '/index/:account ',
props: true,

index.vue中（跳转后接收参数的组件）（直接添加props，无需在数据处添加）

props:[‘account’],

  1. 通过路由的方式跳转并传参<router-link to=”/url”></router-link>
    （该方式使用<router-view/> 显示所对应的路由组件）
    Left.vue中（需要页面跳转的组件）
<!-- 通过路由的方式跳转 -->
<!--:to相当于v-bind:to的简化写法-->
<router-link :to="{name:'taobao',params:{href:'http://www.taobao.com'}}">taobao</router-link><br/>
<router-link :to="{name:'baidu',params:{href:'http://www.baidu.com'}}">baidu</router-link>

router/index.js中（添加name和props支持传参）

{
path: ‘/taobao:href’,
name: ‘taobao’,
props: true,
component: Taobao
},
{
path: ‘/baidu:href’,
name: ‘baidu’,
props: true,
component: Baidu
}

Taobao.vue(baidu.vue)中（跳转后获取参数的组件）（直接添加props，无需在数据处添加）

props:[“href”],

填充参数：

<a :href="href">淘宝</a>
往往Augenstern
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Router的传参方式
RongKai_L的博客
05-11 6799
1.router-link 1.不带参数 <router-link :to="{path:'/home'}" /> 2.带参数 //路由里面配置path:"/home/:id" 或者 path:"/home:id" //html取参 $route.params.id //script 取参 this.$route.params.id <router-link :to="{name:'home',params:{id:1}}" /> 2.this.$router.push()
vue项目——路由传参与router-link传参 多种方式详解
qq_40556950的博客
10-30 936
最近项目中涉及到跨页面传参数和后台进行数据交互，经过多方搜索参考决定用路由传参来解决。 Vue中给我们提供了三种路由传参方式，： 方法一：params传参（只能由name引入） 1.params传参、使用name： this.$router.push({ name:"Check",　 params:{id:item.id, num:item.num} }...
vue-router： 路由传参
02-04 4万+
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。 1.新闻列表页模板 <template id="news"> <div> <h2>新闻列表</h2> <ul> <li> <router-link to="
router 传参
czx3387170的博客
04-28 460
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID： 路由有3种传参方式： 1.可以手写完整的path：this.$router.push({path:`/user/${userId}`}) 2、通过params: query传参是针对path的，p...
vue-router传参的几种方式
lrbtony的博客
11-13 3215
1. 一种是路由参数，通过定义动态路由传递参数2. 另一种是通过query来传递参数再者，一类是<router-link>组件的to跳转二是通过编程式导航，通过js命令进行跳转那么，两种传参方式，两种跳转方式就会有四种搭配写法。
vue-router路由传参的三种方式，2024年最新阿里P8前端架构师谈
最新发布
2401_84139908的博客
04-11 1483
动态路由和query属性传值 页面刷新参数不会丢失， params会丢失动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数。获取参数通过$route对象和自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前。
浅谈vue-router 路由传参的方法
08-28
`$route` 对象提供了多种方式来获取路由参数，例如 `$route.params`、`$route.query` 等。 ### 1. 使用 `$route.params` 获取路由参数 在 vue-router 中，我们可以使用 `$route.params` 来获取路由参数。例如，在...
vue-router传参用法详解
10-17
在 Vue 应用中，我们经常需要在组件之间传递数据，而 Vue Router 提供了多种传参方法。接下来，我们将详细探讨两种主要的传参方式：动态路径参数和通过查询字符串的 GET 方式。 ### 一、动态路径参数 动态路径参数...
vue-router传参方式
03-31
Vue Router 有多种传参方式： 1. 路由参数（动态路由）：在路由定义中使用冒号来声明一个参数，例如 `/user/:id`，然后在组件中通过 `$route.params.id` 来获取参数值。 2. 查询参数（Query）：在路由链接中使用...
vue的传参方式汇总和router使用技巧
08-27
Vue传参方式汇总和Router使用技巧 Vue框架中传参方式是非常重要的，它可以帮助开发者在不同的组件之间...Vue 提供了多种传参方式和Router 使用技巧，开发者可以根据实际情况选择合适的方式来实现数据的传递和交互。
router传参接参（详细）router.beforeEach()
weixin_58431406的博客
06-22 8914
方法一：使用query来传递参数 1.传参this.$router.push({path: ‘/’, query: {参数名: ‘参数值’}) 2.接参this.$route.query.参数名。方法二：使用 params 1.传参this.$router.push({path: ‘/’, name: ‘’, params: {参数名: ‘参数值’}) 2.接参this.$route.params.参数名 .........
vue-router路由传参的几种方式(干货)
weixin_45475798的博客
03-01 1242
vue路由传参
vue-router传参方式三种（举例详细）
qq1722377628的博客
09-17 950
以下例子全部采用a组件向b组件传参的方式。 看一下界面， 点击按钮跳转到b组件，并把参数传递过去。 路由配置（index.js） routes: [ { path: '/', component: A }, { path: '/b', name:'b', // 这句特别重要 component: B } ] 1.params。 不多bb，看代码。 给a组件里的按钮添加一个点击事件。 <butto
Vue router传参--最干最全最简单易懂版
weixin_45894479的博客
02-26 372
Veu路由跳转有三种传参方式： 在vue-router中，有两大对象被挂载到了实例this $route（只读、具备信息的对象）； $router（具备功能的函数） 话不多说直接干货： ​ 以下传递的所有数据都为 1 静态路由传参: 发: 1.query 传参 <router-link :to="{path:'/Other',query:{id:1}}">传参1</router-link> 2.params 传参 <router-link :to="{name:'Other'
vue-router传递参数方法（3种）
wenmin1987的博客
09-26 7289
第一种：get方法 传递值 <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 或 <router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 接收值（页面刷新的时候不会消失） this.$route.que
Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式
CYK_byte的博客
10-17 3759
在创建 VueRouter 中，path 还有一个 children 参数，用来定义嵌套子组件路由.通过 Vue Router 可以将现有的 Vue 开发更灵活，使得一个页面中展示多个不同的组件.a）如下四种路由传参方式（推荐最后一种）之后你就可以直接写切换路由的方法了.例如 /login/cyk/1111。a）如下三种传参方式（推荐最后一种）a）例如通过点击事件，触发路由切换。在创建路由规则对象之后加入如下配置。3.点击提交后，回归用户列表路由。b）注册组件和创建路由规则。b）解决方法二：官方配置。
vue this.$router.push()传参
热门推荐
e87e09e11的博客
01-30 10万+
1 params 传参 注意⚠️：patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}}) 取数据：this.$route.params.paicheNo this.$route.params...
Vue-router传参
huahuahua__的博客
11-23 263
前言 之前都有用过vue-router，也传过参，但是都是看过文档之后直接用，没有具体了解过到底传参有哪几种方法，那么今天就来总结一下。 URL传参 这种方式可以直接在URL里面添加参数传过去 //router-link跳转 <router-link :to={path:`/son/${id}`}></router-link> //js跳转 goto(id){ this....
vue-router传参
珍妮的小罐君
09-10 212
vue-router传参两种方式：params和query params、query是什么？     params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params     query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。 方法1：     query 方式传参和接收参数  ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值