首页 > 其他分享 >vue路由传值总结

vue路由传值总结

时间:2023-04-14 17:12:40浏览次数:43  
标签:传参 vue params 传值 router query path 路由

路由传值总结

1. 路由导航:

  在router.js中配置路由的path为 /XXX/:id 的方式,在路由跳转的时候, 设置路径 /XXX/123 即可跳转

  接收通过this.$route.params.id  即可拿到123

2. params传参:

  通过this.$router.push 传参,配置name匹配路由name属性, 设置params对象,内部为传入的参数

  接收通过 this.$route.params.字段名 获取

3. query传参:

  通过this.$router.push 传参,配置path匹配路由path属性,设置query对象,内部为传入的参数

  接收通过 this.$route.query.字段名 获取

  

标签:传参,vue,params,传值,router,query,path,路由
From: https://www.cnblogs.com/workJiang/p/17318697.html

相关文章

  • vue中使用jsx
    前言相对来说有些时候用jsx更合适,更灵活些安装依赖有对应的包支持yarnadd--dev@vitejs/plugin-vue-jsx配置插件在vite.config.jsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importvueJsxfrom"@vitejs/plugin-vue-jsx";//ht......
  • vue列表渲染之for循环
    vue列表渲染之for循环前端开发中,如果涉及列表渲染,都会提示或要求每个列表项使用唯一的key,那很多开发者就会直接使用数组的index作为key的值,而并不知道key的原理。那么以下会讲解key的作用以及为什么最好不要使用index作为key的属性值。1、作用在虚拟DOM中,key是虚......
  • provide/reject多组件嵌套传值
    多组件嵌套传值现在用组件A、组件B、组件C三个组件一、组件嵌套1.组件A(相当于父组件),在组件A调用组件B<template><div><componentb></componentb></div></template><script>importComponentbfrom'../components/componentb.vue'//引用组件......
  • vue通过Export2Excel.js进行导入excel,获取数据
    <!--封装的模板下载和导入按钮和功能组件--><template><spanstyle="margin-left:10px"><el-buttonsize="mini"class="el-icon-download"@click="downFiles">下载模板</el-button><el-upload......
  • Vue2总结
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue│......
  • 2023-04-14 vue之组件全局注册
    新建一个vue文件,随便写点什么,然后在main.js中引入,如下:xxx.vue:<template><viewclass="container"><viewclass="content">登录窗口</view></view></template><script>exportde......
  • Vue3 Vite H5 手写一个横向展开的多级树列表
    最近写h5要做那种稍微复杂一点的树,没找到现成的UI组件库可用,vant的树只有两级不满足,只能自己写ps.选框的选择/反选/半选对父子选项的影响还有bug,留到脑子好的时候再优化效果代码框架是Vue3+Vite+Vant4。复选框用的vant的checkbox,应该也可以换别的或者原生。模板<templ......
  • vue 使用 vue-seamless-scroll 实现LED屏滚动效果
    yarnaddvue-seamless-scroll<divclass="index-roll"><vue-seamless-scroll:data="partnerList":class-option="optionLeft"><ul><liv-for=&quo......
  • 传值与传址
    一、js基本数据类型 numberstringboolenundefinednullsymbol复制时复制的是栈地址,所以修改时为深拷贝,修改复制数据不会影响初始数据二、js引用数据类型 objectarrayfunction数据存储在堆内,复制时复制的是堆的地址,修改时为浅拷贝,只拷贝了内存地址,修改复制数据时,堆内......
  • 东用科技路由器连接上云助手配置指导手册
    一、上云助手操作步骤1.安装“Devicecontrolcenter”并启动。2.点击“服务器设置”后设置端口号:1-65535,传输协议:TCP/UDP。##路由推送功能默认不勾选。其功能为将填写的远端子网及掩码信息推送给客户端,客户端就会生成一条目的网段为此“远端子网”,下一跳为上云助手的静态路由,从而......