vue 跳转到指定路由地址 (可附带参数)

本文详细介绍了在Vue中如何使用`router-link`进行页面跳转,包括直接跳转到指定路由和携带参数跳转。通过`params`和`query`两种方式传递参数,区别在于URL的显示及刷新后的参数保留情况。同时,文章提供了参数接收的实例代码,强调了在不同场景下如何获取和使用传递的参数。
摘要由CSDN通过智能技术生成

1. vue 使用 router-link 跳转到指定路由地址

使用 router-link

<span class="product-justify" @click="editPlan(originData[data.$index])">
    <router-link :to="{ path: '/calculatePlan'}" >调整</router-link>
</span>

使用router-link可以跳转到指定路由页面
:to 绑定路由地址,这个路由地址记得在 路由 中写好
路由文件中地址路径如下

{
            path: "/calculateMaterial", // 算料管理
            component: Layout,
            children: [
                {
                    path: "/ingredientRecord", // /原料化验/
                    component: ingredientRecord,
                    meta: { title: "配料记录" }
                },
                {
                    path: "/calculatePlan", // /成品化验/
                    name: "calculatePlan",
                    component: calculatePlan,
                    meta: { title: "算料方案" }
                }
            ]
        },

2. 附带参数跳转

可以使用params或者query

区别:
① 使用query跳转到的界面地址后会多出来参数 使用params不会多参数(还是原路由地址)
query

在这里插入图片描述
params
在这里插入图片描述
② 刷新后,query的参数不会消失(因为路由地址中含参数),params参数会消失

① query

点击跳转:

<router-link :to="{ path: '/calculatePlan/', name: 'calculatePlan', params: {feedAdviceId: id}}" >调整</router-link>

在path中写好跳转路由地址,name中写路由地址的name(见上文路由定义),然后再 params中添加一个对象(大括号),然后在对象中填写参数,这里的参数可以有多个,通过逗号分隔

参数接收
query通过 this.$route.params.参数名 来获取

if (this.$route.params.feedAdviceId !== null) {
        console.log('id', this.$route.query.feedAdviceId);
    }
}

此处在mounted中判断了一下有没有,有就可以用啦
注意$route 而不是 $router
这个参数接收,如果需要一开始就获取,那么可以写在页面的 mounted 或者 created 中;如果需要点击页面某个地方才开始获取参数,可以将上文的参数接收写在 @click的方法中

② params

点击跳转

<router-link :to="{ path: '/calculatePlan/', name: 'calculatePlan', params: {feedAdviceId: originData[data.$index].id}}" >调整</router-link>

参数接收

if (typeof (this.feedAdviceId) === 'number') {
    this.feedAdviceId = this.$route.params.feedAdviceId; // 获取feedAdviceId, 如果有则typeof 为 number,没有则为 undefined
}

ps1
如果该子组件页面既可以传参数又可以不传参数,那么再接收参数的时候,可以对相应参数判断一下,是否存在,比如上文中,使用typeof判断了一下id是否为数字,如果是number:说明参数存在并继续使用该id;是undefined:说明进入该子页面没有带参数
ps2
vue 可以通过 $route 获取页面的地址、参数、title
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值