vue3.x版本路由router跳转+传参
显示传参模式 get
import { useRouter } from 'vue-router';
const router = useRouter();
let skipEdit = (key: string, res: any) => { // 个人需求函数自行省略
router.push({
path: 'editRole',
query: {
key: key,
body: res,
},
});
};
// 接收
import { useRoute } from 'vue-router';
setup() {
const route = useRoute(); // 1
let res: any = ref({});
let get = async () => {
res.value = await getParticulars({ categoryName: route.query.name // 2 });
};
onMounted(get);
return {
columns,
get,
res,
};
},
隐式传参模式 post
import { useRouter } from 'vue-router';
const router = useRouter();
let skipEdit = (key: string, res: any) => { // 个人需求函数自行省略
router.push({
name: 'EditRole',
params: {
key: key,
body:JSON.stringify(res),
},
});
};
// 接收
setup() {
const route: any = useRoute();
if (route.params.body) {
let obj = JSON.parse(route.params.body);
console.log(JSON.parse(obj));
}
return {
date,
};
},
vue3.x版本路由router跳转+传参的更多相关文章
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- 微信小程序~跳页传参
[1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- 【微信小程序】Page页面跳转(路由/返回)并传参
页面跳转的方法参考官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html 问题:使用wx.na ...
- vue路由router的三种传参方式
方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...
随机推荐
- 设置自启动nginx(适用于其他软件)(LinuxDeploy里的Ubuntu)
LinuxDeploy里的Ubuntu自启动nginx(适用于其他软件) 网上的教程是这样的,基本能用 1.编写脚本(这个文件及其内容安装Nginx后自动生成,没有的话内容自己Google) $ su ...
- PHP中的IMAP扩展简单入门
对于邮件处理来说,大家比较熟悉的应该是 POP3 . SMTP 这类的协议,而今天我们介绍的 IMAP 其实也是非常常用的一种邮件处理协议.它和 POP3 比较类似,都是以接收处理邮件为主.不过相对于 ...
- shell脚本中 /dev/null 的用途
/dev/null 是一个特殊的设备文件,它丢弃一切写入其中的数据 可以将它 视为一个黑洞, 它等效于只写文件, 写入其中的所有内容都会消失, 尝试从中读取或输出不会有任何结果,同样,/dev/nul ...
- P4320-道路相遇,P5058-[ZJOI2004]嗅探器【圆方树,LCA】
两题差不多就一起写了 P4320-道路相遇 题目链接:https://www.luogu.com.cn/problem/P4320 题目大意 \(n\)个点\(m\)条边的一张图,\(q\)次询问两个 ...
- P4884-多少个1?【BSGS】
正题 题目链接:https://www.luogu.com.cn/problem/P4884 题目大意 求一个最小的\(n\)使得\(n\)个连续的\(1\)其在模\(m\)意义下等于\(k\). \ ...
- PHP的SPL扩展库(一)数据结构
SPL 库也叫做 PHP 标准库,主要就是用于解决典型问题的一组接口或类的集合.这些典型问题包括什么呢?比如我们今天要讲的数据结构,还有一些设计模式的实现,就像我们之前讲过的观察者模式相关的接口在 S ...
- HttpClient遭遇Connection Reset异常,如何正确配置?
最近工作中使用的HttpClient工具遇到的Connection Reset异常.在客户端和服务端配置不对的时候容易出现问题,下面就是记录一下如何解决这个问题的过程. 出现Connection Re ...
- Java String的探讨
关于String相关内容的学习,历来都是Java学习必不可少的一个经历. 以前一直想要好好总结一下String的相关的知识点,苦于没有时间,终于在今天有一个闲暇的时间来好好总结一下,也希望这文章能够加 ...
- 常用SQL函数大全
数学函数 mod(x,y) 返回x/y的模(余数)mod(5,3)=2,mod(3,5)=3 floor(x) 返回小于x的最大整数值ceiling(3)=3,ceiling(3.1)=3 cei ...
- Python中pymongo find 遍历数据导致timeout
背景 在读取大约200W左右的数据的时候采用游标形式进行数据遍历时,超过10分钟就报错 timeout 原因 pymongo游标会在10分钟之后被关闭 解决方案 db.find({}, no_curs ...