vue3 路由传参_vue router传参

vue3 路由传参_vue router传参前言vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为params传参和query传参,而params传参又可分为在url中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。方式一:params传参(显示参数)params传参(显示参数)又可分为声明式和编程式两种方式1、声明式router-link该…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

前言

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

方式一:params 传参(显示参数)

params 传参(显示参数)又可分为 声明式 和 编程式 两种方式

1、声明式 router-link

该方式是通过 router-link 组件的 to 属性实现,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。使用该方式传值的时候,需要子路由提前配置好参数,例如:

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>

Jetbrains全家桶1年46,售后保障稳定

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,例如:

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

方式二:params 传参(不显示参数)

params 传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 name 进行传值的

1、声明式 router-link

该方式也是通过 router-link 组件的 to 属性实现,例如:

<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router-link>

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好参数,不过不能再使用 :/id 来传递参数了,因为父路由中,已经使用 params 来携带参数了,例如:

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

注意:上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

方式三:query 传参(显示参数)

query 传参(显示参数)也可分为 声明式 和 编程式 两种方式

1、声明式 router-link

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

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>

2、编程式 this.$router.push

使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性),例如:

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
    	id:123
    }
})

在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200743.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • JavaScript实例教程

    JavaScript实例教程第一个javascript程序javascript放在head部分javascript放在body部分javascript放在head和body部分javascrip

  • 三种主流芯片架构简单比较[通俗易懂]

    三种主流芯片架构简单比较[通俗易懂]来源:https://blog.csdn.net/weixin_39752599/article/details/78664055可以参照的信息:https://blog.csdn.net/shenghuaDay/article/details/78747561三种主流芯片架构  1. ARM ARM是高级精简指令集的简称(AdvancedRISCMachine),它是一个32位的精简…

  • 企业级发卡网源码下载带代理系统授权搭建教程

    企业级发卡网源码下载带代理系统授权搭建教程  发卡网源码,英文名:Automaticshippingsourcecode,适用于构建在互联网上用于虚拟商品自动发货和交易的网购平台。往往根据用途和规模不同,分为:企业发卡网源码和个人发卡网源码,其核心功能为自动发货和自动收付款,类似于线下的无人售货机。  发卡网只适用于虚拟物品的交易,无法完成实物的交易,由于实物涉及快递时长,不符合发卡网方便快捷的特点。要想搭建一个运转良好的发卡网是需要做大量工作的,但最重要最基础的是搭建的发卡网源码稳定且bug少,不然很难提供频繁的发卡交易服务。 

  • linux修改密码后登陆失败_linux取消root密码

    linux修改密码后登陆失败_linux取消root密码问题:当使用root修改密码时,报错passwd:Authenticationtokenmanipulationerror解决:1、查看是否权限问题,/etc/passwd/etc/shadow文件是否被锁住lsattr/etc/passwdlsattr/etc/shadow文件解锁:chattr-i/etc/passwdchattr-i/etc…

  • Do we need other languages other than C and C++?

    Do we need other languages other than C and C++?

  • jqGrid基本用法与示例「建议收藏」

    jqGrid基本用法与示例「建议收藏」转自:https://chuanlu.iteye.com/blog/1953544一、jqGrid的基本用法1、html页面Html代码<!DOCTYPE html 

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号