VUE路由传参的实用方式

这篇具有很好参考价值的文章主要介绍了VUE路由传参的实用方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文讲解了VUE项目中路由之间的传值方式,涉及到的方法都是开发时常用的,希望对大家有多帮助。

1. 方式一:使用router-link标签 

1.1 params 传参

  • 首先定义好路由
    const routes = [
        { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
        { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
    ]
  • 在需要跳转的home组件中使用 router-link 标签
    <router-link :to=”{ name : ’about’ , params : { id : 1} }”>跳转</router-link>
  • 在跳转到的about组件中拿到传过来的值
    this.$route.params.id

小结:params传参类似post,路由配置可以为 path : '/about/ : id’  path : '/about : id’

注意:如果不配置path的路由地址 :id ,那么第一次发起请求时可以拿到传过来的值,但是刷新之后id会消失;配置了path后刷新页面id会保留。

1.2 query传参

  • 首先定义好路由
    const routes = [
        { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
        { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
    ]
  • 在需要跳转的home组件中使用 router-link 标签
    <router-link :to=”{ name : ’about’ , query: { id : 1} }”>跳转</router-link>
  • 在跳转到的about组件中拿到传过来的值
    this.$route.query.id

小结:query传参类似于get,在url末尾会显示传过来的参数,路由地址可不配置。

注意:如果是html取参,用$route.query.id;如果是script取参,用this.$route.query.id。

总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。文章来源地址https://www.toymoban.com/news/detail-474739.html

 

 

2. 方式二:使用button按钮和点击事件@click

2.1 params 传参

  • 首先定义好路由
    const routes = [
        { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
        { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
    ]
  • 在需要跳转的home组件中添加一个button按钮,并增加点击事件

    <button @click=”change”>跳转</button>
  • 在change方法中使用this.$router.push进行页面跳转

    change(){
        this.$router.push({
            name : “about” , 
            params : {id : 1}
        })
    }        
  • 在about组件中拿到传过来的值

    this.$route.params.id 

小结:和使用router-link标签类似,使用params就类似于post方法,需要配置好路由地址:id,才不会在刷新页面后丢失数据。

2.2 query传参

 

  • 首先定义好路由
    const routes = [
        { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
        { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
    ]
  • 在需要跳转的home组件中添加一个button按钮,并增加点击事件

    <button @click=”change”>跳转</button>
  • 在change方法中使用this.$router.push进行页面跳转

    change(){
        this.$router.push({
            name : “about” , 
            query: {id : 1}
        })
    }

    或者:

    change(){
        this.$router.push({
            path: “/about” , 
            query: {id : 1}
        })
    }
  • 在about组件中拿到传过来的值

    this.$route.query.id

小结:和使用router-link标签类似,使用query就类似于get方法,不需要配置好路由地址:id,刷新页面后数据也不会丢失。

 

总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。

到了这里,关于VUE路由传参的实用方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript传参的6种方式

    JavaScript是一门非常灵活的语言,其参数传递方式也同样灵活。在本篇文章中,会详细介绍JavaScript中的参数传递方式,并提供相关的示例和解释。 在JavaScript中,基本类型参数(比如字符串、数字、布尔值等)是通过值传递的。这意味着,当我们将一个基本类型的值传递给一个

    2024年02月01日
    浏览(66)
  • 小程序页面路由传参的方法?

    在小程序中,可以使用页面路由传递参数。有以下几种方式可以实现: 通过 URL 参数传递:在跳转到目标页面时,可以在 URL 中添加参数。例如: 在目标页面的 onLoad 方法中可以通过 options 参数获取传递的参数: 通过全局变量传递:可以通过小程序的全局变量来传递参数。在

    2024年01月17日
    浏览(48)
  • taro跳转页面传参的几种方式

    我之前在网上也搜了挺多taro传参的方式,这里我总结一下 路由跳转分Taro.navigateTo与Taro.redirectTo, 但是这两种方法只适用于传递少量参数 Taro.navigateTo跳转时是将新的页面加载过来,最多加载到10层,返回时去的是上一页; Taro.redirectTo跳转的同时将当前页面销毁,返回时去的是

    2024年02月07日
    浏览(47)
  • 微信小程序页面之间传参的几种方式

    目录 前言 第一种:url传值 url传值使用详细说明 api跳转 组件跳转 第二种:将值缓存在本地,再从本地取值 第三种:全局传值(应用实例传值) 第四种:组件传值 第五种:使用通信通道(通信通道是wx.navitageTo()独有的) 第六中:使用页面栈(只对当前页面栈中存在的页面生效

    2024年04月13日
    浏览(43)
  • [uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式 使用案例 代码注释

    在uniapp中,页面传参是非常常见的需求。本文将详细讲解uniapp中页面传参的传递方式和接受方式,以及使用案例,同时附上代码注释。 1. URL传参 URL传参是一种比较简单的传递方式,它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数,例如: 在接收页面中,我们

    2024年02月19日
    浏览(45)
  • 第三方组件及计算属性传参的问题解决方式

    唉,好想玩滋嘣。 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于 fullName()(item) ,此处为函数柯里化。 封装好的组件的事件回调函数想要传其它参数,事件的回调直接写 :before-upload=\\\"beforeUpload(\\\'a\\\')

    2024年02月05日
    浏览(56)
  • vue路由传参(六种方式)

    1.query传参:         query传参,通过get传参也就是原始传参,在path路径后面跟上?id=18name=“张三”,会传递到query里面         实例: {                 path:\\\'/home\\\'?name=\\\'张三\\\'age=18,                 component:()=import(\\\'./home.vue\\\')            }         通过$ro

    2024年02月13日
    浏览(32)
  • vue中组件传参的几种方法

    Props:通过在父组件中定义props属性,将数据传递给子组件。子组件通过props属性接收数据。例如: $emit:通过在子组件中触发事件,将数据传递给父组件。父组件通过在子组件上监听事件,接收数据。例如: Provide/Inject:通过在父组件中提供数据,让子孙组件可以注入数据。

    2024年02月12日
    浏览(47)
  • 学习笔记230810--vue项目中get请求的两种传参方式

    问题描述 今天写了一个对象方式传参的get请求接口方法,发现没有载荷,ip地址也没有带查询字符串,数据也没有响应。 代码展示 错误分析 实际上这里的 query 是对象方式带参跳转的参数名,而get方法对象方式传参的参数名是parmas 解决方法 get请求有两种带参的方式 方式1 :

    2024年02月10日
    浏览(43)
  • Postman传参的JSON格式

    实体类: json格式: 1.JSON数值({ “key” : value}) 2.JSON字符串({ “key” : “value”}) 3.JSON数组({ “key” : [value]}) 4.JSON对象({ “key” : {value}}) 5.JSON对象数组({ “key” : [{“key1”: “value1”},{“key2”: “value2”}]}) 6.JSON数组对象({“key”:{“key1”:[value1,value2]}})

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包