首页 > 其他分享 >vue-路由传参

vue-路由传参

时间:2022-09-07 11:02:53浏览次数:55  
标签:传参 username vue query time push router login 路由

1.声明式导航(router-link)

  <router-link to="/login">登录</router-link>

2.编程式导航($router.push|replace)
params:属于路径一部分,需要占位

{
   path:'/search/:keyword?',
   component:Search,
   name:"search",
   meta:{show:true},
   props:{a:1,b:2}
},

query:不属于路径一部分,类似于localhost:8080/login?username="hutong"
(1)第一种、字符串形式

  this.$router.push('/login/'+this.username+'?time=' + this.time)

(2)第二种、模板字符串

  this.$router.push(`/login/${this.username}?time=${this.time}`)

(3)对象式写法

  this.$router.push({name:'login',query:{username:this.username},
  parmas:{time:this.time}})

标签:传参,username,vue,query,time,push,router,login,路由
From: https://www.cnblogs.com/hutongtree/p/16664537.html

相关文章

  • vue3源码学习6-计算属性computed
    packages/reactivity/src/computed.tsexportfunctioncomputed<T>(getterOrOptions:ComputedGetter<T>|WritableComputedOptions<T>,debugOptions?:DebuggerOp......
  • Vue面试题13:说一说key的作用
    思路分析:1.给出结论,key的作用是用于优化patch性能;2.key的必要性;3.实际使用方式;4.总结:可从源码层面描述一下vue如何判断两个节点是否相同;回答范例:1.key的作用......
  • vue前端项目组件实现自动注册并且全局可引用
     1、首先创建一个组件的目录,例如图中components2、创建一个js主文件和一个存放组件的目录如global3、在js中加入图中代码,实现自动识别组件功能4、在文件入口main.js......
  • vue实现表单验证功能
    https://www.yht7.com/news/156187vue实现表单验证功能 作者:佚名   来源:网络转载  时间:2021-08-27本篇主要讲述如何基于NUXT的validate方法实现表单的......
  • Vue移动端rem适配
    1.新建adaptive.js文件functionadaptive(){//在标准375px适配下,1rem=16px;varbaseFontSize=16varbaseWidth=375varset=function()......
  • Vue学习笔记
    Vue学习笔记书籍Vue.js实战 梁灏著开发工具HBuilderVisualCode扩展插件  在vscode中点击侧边栏中的扩展按钮,然后在出现的搜索栏中输入@installed即......
  • Vue sortable实现排序功能
     1.vue代码 <template><el-table@selection-change="handleSelectionChange"@sort-change="sortChange"v-loading="loading"id="TableColumnID"eleme......
  • elementUI-点击表格某一行携带参数跳转到另一个页面-路由携参
    1.应用场景示例(1)在任务下发界面,点击查看巡检结果,携带tsakId,times跳转到任务结果界面,查询任务对应的任务结果(2)任务结果页面2.实现方法及步骤(1)通过el-table,添加操作列......
  • 【源码学习】Vue源码的敲门砖(目录结构)
    声明本文是开始学习 Vue 源码的第一篇笔记,当前的版本是 2.6.14 。源码结构目录结构在 github 上下载了源码,是一个叫vue-dev 的文件夹,展开以后 一级目录结构 ......
  • 第 1 题:写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?
    <divid="app"><divv-for="iindataList">{{i}}</div></div>varvm=newVue({el:'#app',data:{dataList:[1,2,3,4,5]}})以上的例......