vue-router中 query传参和params传参的使用和区别讲解

 更新时间:2024年01月17日 11:18:31   作者:alokka  
这篇文章主要介绍了vue-router中 query传参和params传参的使用和区别讲解,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

时隔一年,发现自己回来看自己写的文档都看得云里雾里,这次我在重新改善下这篇文章,希望这篇文章能给大家一些帮助
-2019/12/26

1.query传参:

1.query传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

导航:

// 注意:这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link>
    或
    <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
等同于:
	this.$router.push('/login?id=10&name=zs')
	this.$router.push({path:'/register',query:{id:5,name:'lili'}})
	或
	this.$router.push({name:'register',query:{id:5,name:'lili'}})

注意:jquery可以通过name或path来引入路由

2.params传参

2.params传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 这里不传入对应的参数(:/id/:name) 刷新页面 参数会消失,页面中就丢失了数据
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

导航:

// 注意:这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
等同于:
	this.$router.push('/login/12/ls')
	this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意:params只能通过name来引入路由,path会undefined

jquery传参和params传参的区别

1.用法上:

  • 上文已经提到query可以用name或path来引入
  • params必需要用name来引入,接收参数都是类似的,分别是:

this.$route.query.namethis.$route.params.name

2.地址栏表现形式上:
query:

params:

注意:这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失

到此这篇关于vue-router中 query传参和params传参的使用和区别的文章就介绍到这了,更多相关vue-router query和params传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中axios的get请求和post请求的传参方式、拦截器示例代码

    vue中axios的get请求和post请求的传参方式、拦截器示例代码

    Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求,post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据,本文给大家介绍vue中axios的get请求和post请求的传参方式、拦截器示例代码,感兴趣的朋友一起看看吧
    2023-10-10
  • vue之数据交互实例代码

    vue之数据交互实例代码

    本篇文章主要介绍了vue之数据交互实例代码,vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,有兴趣的可以了解一下
    2017-06-06
  • Vue中的event对象介绍

    Vue中的event对象介绍

    这篇文章介绍了Vue中的event对象,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue中echarts关系图动态增删节点以及连线方式

    vue中echarts关系图动态增删节点以及连线方式

    这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue+echart实现圆滑折线图

    vue+echart实现圆滑折线图

    这篇文章主要为大家详细介绍了vue+echart实现圆滑折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 快速将Vue项目升级到webpack3的方法步骤

    快速将Vue项目升级到webpack3的方法步骤

    这篇文章主要给大家介绍了关于如何快速将Vue项目升级到webpack3的方法步骤文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • vue slots 组件的组合/分发实例

    vue slots 组件的组合/分发实例

    今天小编就为大家分享一篇vue slots 组件的组合/分发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue filters过滤器的使用方法

    Vue filters过滤器的使用方法

    这篇文章主要为大家详细介绍了Vue filters过滤器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    这篇文章主要介绍了Vite+Vue3+TypeScript 搭建开发脚手架的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

    本篇文章主要介绍了windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论