首页 > 其他分享 >vue-router传参问题

vue-router传参问题

时间:2023-04-08 13:55:26浏览次数:35  
标签:传参 vue query params path push router 参数

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

  

可以看出params对应的是name,而query对应的是path

其中params传参时,url上看不到参数,而query则在url地址上能看到参数。

params隐藏了参数,但是很容易丢失参数。

标签:传参,vue,query,params,path,push,router,参数
From: https://www.cnblogs.com/youyuan1980/p/17298422.html

相关文章

  • Vue进阶(四十九):在Webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能
    在webapp上使用input:file,指定capture属性调用默许相机,摄像,录音功能。在webapp上使用input:file,指定capture属性调用默认相机,摄像,录音功能在iOS6下开发webapp,使用input之file,很有用<inputtype="file"accept="image/*"capture="camera"><inputtype="file"acce......
  • vue中 ref、$refs、$emit、$on、$bus、$off 详解和使用
    1.ref和 $refsref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上,如果是在普通的DOM元素上使用,引用指向的就是DOM元素,如果是在子组件上,引用就指向组件的实例。$refs是一个对象,持有已注册过ref的所有的子组件。ref用法:ref加在普通的元素......
  • vue导入处理Excel表格详解
    https://blog.csdn.net/m0_46309087/article/details/125022676 目录1.前言2.vue导入Excel表格2.1使用ElementUI中的upload组件2.2使用input文件上传3.总体代码与效果4.总结1.前言  最近遇到前端导入并处理excel表格的情况,趁此机会刚好研究一下vue导入并处理excel数据;......
  • 源码共读 | tdesign-vue 初始化组件
    前言Tdesign-vue是一由腾讯开源的Vue.js组件库。我们知道,这些大型的组件库业务覆盖面很广,基本都包含了很多组件,很多组件包含了一些通用性代码,如果每开发一个组件,都去把这些通用性代码复制出来,无疑是非常繁琐的,那么作者在开发这些组件时是如何做的呢?学习目标:新增组件:npmrun......
  • Mac Apple 芯片运行 Vue 项目中 node-sass 转为 sass 遇到的问题记录,node-sass 替换成
    背景:前段时间因为某些原因将window笔记本换成MacM1pro,然后运行项目的时候发现高于node12版本的项目中不支持node-sass。记录下解决相关问题之后的记录......
  • Jenkins Vue Windows(FreeSSHd)整合
      创建项目第一次创建执行一次如下的代码。#进入Jenkins工作空间下hxkj项目目录cd/root/.jenkins/workspace/pc_back#下面的命令只需要执行一次,后续可以删除####npm切换为淘宝源npmconfigsetregistryhttp://registry.npm.taobao.org/#安装yarnnpmiyarn......
  • vue3学习第二课:组件和父组件的传递数据给子组件方式props
    1,在conponents目录中新建header.vue<template><div><h1>这是头部组件</h1></div></template>2,在App.vue中添加<template><div><Header></Header><Main></Main><Foote......
  • 记录-VueJs中如何使用Teleport组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件但是从整个页面应用的视图上看,它在DOM中应该被渲染在整个vue应用外部的其他地方,不能影响组件的结构比......
  • 学习使用VUE3+Django+GraphQL实现简单的Blog网站
    这周每天花点时间学习使用VUE3+Django+GraphQL的使用,按照RealPython的网站的教程走了一遍,踩了一遍坑.Realpython上的教程使用的是Vue2的Vue-CLI模块,Vue本身已经进化到VUE3,并且推荐使用Vite代替Vue-CLI.我按照教程上的步骤将代码转化为VUE3+Vite+CompositionAPI模式.在这里......
  • VUE解决跨域的proxyTable
    找到问题:因为java服务运行在localhost:9001端口,vue运行在localhost:8080端口,不同端口存在跨域问题。所以我使用了反向代理处理。在vue.config.js里:proxyTable:{'/api':{target:'localhost:9001',//secure:true,changeOrigin:true,......