vue-router传参的四种方式超详细讲解

目录
  • vue路由传参的四种方式
  • 一、router-link路由导航方式传参
  • 二、调用$router.push实现路由传参
  • 三、通过路由属性name匹配路由，再根据params传递参数
  • 四、通过query来传递参数
  • vue-router传递参数的几种方式

vue路由传参的四种方式

一、router-link路由导航方式传参

父组件：<router-link to="/跳转到的路径/传入的参数"></router-link>
子组件：this.$route.params.content接受父组件传递过来的参数

例如：
路由配置：

bashbash{path:'/father/son/:num',name:A,component:A}```

地址栏中的显示：

http://localhost:8080/#/father/son/44

调用方法：

<router-link to="/father/son/传入的参数">父亲组件<router-link>
 子组件通过  this.$route.params.num 接受参数

二、调用$router.push实现路由传参

父组件：通过实践触发，跳转代码

<button @click="clickHand(123)">push传参</button>
  methods: {
    clickHand(id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

路由配置

{path: '/d/:id', name: D, component: D}

地址栏中显示：

http://localhost:8080/d/123

子组件接受参数方式

mounted () {
  this.id = this.$route.params.id
}

三、通过路由属性name匹配路由，再根据params传递参数

父组件：

<button @click="ClickByName()">params传参</button>
    ClickByName() {
      this.$router.push({
        name: 'B',
        params: {
          context: '吴又可吴又可吴又可'
        }
      })
    }

路由配置：路径后不需要在加上传入的参数，但是name必须和父组件中的name一致

{path: '/b', name: 'B', component: B}

地址栏中的显示：地址栏不会带有传入的参数，而且再次刷新页面后参数会丢失

http://localhost:8080/#/b

子组件接收参数的方式：

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.context}}</p>
  </div>
</template>

四、通过query来传递参数

父组件：

<button @click="clickQuery()">query传参</button>
    clickQuery() {
      this.$router.push({
        path: '/c',
        query: {
          context: '吴又可吴又可'
        }
      })
    }

路由配置：不需要做任何修改

{path: '/c', name: 'C', component: C}

地址栏中的显示(中文转码格式)：

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

子组件接受方法：

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.context}}</p>
  </div>
</template>

工作中经常用的也就是上面的几种传参方式,完结~ 欢迎点赞收藏哦

补充知识：

vue-router传递参数的几种方式

vue-router传递参数分为两大类
1 编程式的导航 router.push
2声明式的导航

编程式的导航 router.push
编程式导航传递参数有两种类型：字符串、对象。
字符串
字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：
this.$router.push("home");

对象
使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})
name:为路由的名字
获取参数
{{this.$route.params.userId}}

查询参数
使用方法如下：
this.$router.push({ path: '/news', query: { userId: 123 }});
获取参数
{{this.$route.query.userId}}

声明式的导航

字符串方式
click to news page

命名路由方式
click to news page
查询参数方式
click to news page

1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

到此这篇关于vue-router传参的四种方式超详细的文章就介绍到这了,更多相关vue-router传参方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue router 路由跳转方法讲解

    目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标

  • 快速掌握Vue Router使用方法

    目录 一.编程式路由导航 二.缓存路由组件 三.两个新的声明周期钩子 四.路由守卫 五.路由器的两种工作模式 本篇博客会介绍Vue中的VueRouter的基本使用,编程式路由导航增加了我们进行路由跳转的灵活性,缓存路由组件保障了我们使用路由时的便捷性,生命周期钩子为我们切入切出路由时提供了初始化与善后的工作,路由守卫保障了我们路由组件的安全性,路由工作模式会使我们理解为啥Vue项目中的路由会有一个#,通过本篇博客会让大家快速掌握Vue中路由的基本使用. 一.编程式路由导航 作用:不借助<rout

  • vue-router的导航守卫使用最新讲解

    目录 前言 vue-router中编程式导航API 导航守卫 全局守卫 独享路由守卫 组件路由守卫 前言 在浏览器中点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击<a>链接.vue项目中点击<router-link>都属于声明式导航. 在浏览器中调用API方法实现的导航方式,叫做编程式导航.例如:普通网页中调用loaction.href跳转到新页面的方式,属于编程式导航. vue-router中编程式导航API 编程式路由导航作用就是不借助<router-lin

  • Vue3的vue-router超详细使用示例教程

    目录 搭建vue3环境 vue-router入门(宝宝模式) vue-router基础(青年模式) 一.动态路由匹配 1.带参数的动态路由匹配 2.捕获所有路由或404 Not Found路由 二.嵌套路由 三.编程式导航 1.router.push()方法的使用 2.router.replace()方法的使用 3.router.go()方法的使用 搭建vue3环境 我们使用vite来搭建vue3环境(没有安装vite需要去安装vite) npm create vite routerStudy

  • Vue router配置与使用分析讲解

    目录 说明 一.安装及配置 二.在html中使用 HTML router-link router-view 三.路由的基本使用 四.动态路由的添加 说明 本教程适用于vue3中的路由vue-router@4,的配置及使用 安装及配置 路由的基本使用 动态路由的添加 路由守卫 找不到路由配置(path: ‘/:pathMatch(.)’,) 一.安装及配置 安装 npm install vue-router@4 配置 //自己创建的router文件中 import { createRouter,

  • Vue中router-link常用属性使用案例讲解

    目录 Vue中router-link常用属性使用 router-link属性 vue中的router-link属性详解 router-link标签 router-link属性值详解 Vue中router-link常用属性使用 在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导

  • vue-router传参的四种方式超详细讲解

    目录 vue路由传参的四种方式 一.router-link路由导航方式传参 二.调用$router.push实现路由传参 三.通过路由属性name匹配路由,再根据params传递参数 四.通过query来传递参数 vue-router传递参数的几种方式 vue路由传参的四种方式 一.router-link路由导航方式传参 父组件:<router-link to="/跳转到的路径/传入的参数"></router-link>子组件:this.$route.param

  • vue-router传参的4种方式超详细讲解

    目录 一.router-link路由导航方式传参 二.调用$router.push实现路由传参 三.通过路由属性name匹配路由,再根据params传递参数 四.通过query来传递参数 总结 一.router-link路由导航方式传参 父组件:<router-link to="/跳转到的路径/传入的参数"></router-link> 子组件:this.$route.params.content接受父组件传递过来的参数 例如: 路由配置: bashbash{p

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • vue router 传参获取不到的解决方式

    在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(){ console.log(this.$route.params) //这里输出undifined } 导致这样的原因是因为params需要通过name来获

  • 详解vue-router传参的两种方式

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 vue-router传参两种方式:params和query params.query是什么? p

  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析 因为传参能够被用户看见,传递获取比较麻烦,所以不推荐 第二种传参方式,隐式路由传参 <Link to={{ pathname: '

  • 小程序页面间传参的五种方式实例详解

    目录 前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈 总结 前言 由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结.共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨 概览: 方式 优点 缺点 globalData 双向传参.全应用可用 不及时 storage 双向传参.全应用可用 不及时 路由 简单方便.及时 正向传参 通信

  • ajax中data传参的两种方式分析

    本文实例讲述了ajax中data传参的两种方式.分享给大家供大家参考,具体如下: 1. POST方式: /** * 订单取消 * @return {Boolean} 处理是否成功 */ function orderCancel(orderId, commant){ var flag = false; $.ajax({ type: "POST", url: "../order/orderCancel.action", //orderModifyStatus data:

随机推荐