显示传参模式 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跳转+传参的更多相关文章

  1. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  2. Angular:路由的配置、传参以及跳转

    ①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...

  3. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

  4. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  5. 微信小程序~跳页传参

    [1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...

  6. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  7. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  8. 【微信小程序】Page页面跳转(路由/返回)并传参

    页面跳转的方法参考官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html 问题:使用wx.na ...

  9. vue路由router的三种传参方式

    方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

随机推荐

  1. PHP设计模式之模板方法模式

    模板方法模式,也是我们经常会在不经意间有会用到的模式之一.这个模式是对继承的最好诠释.当子类中有重复的动作时,将他们提取出来,放在父类中进行统一的处理,这就是模板方法模式的最简单通俗的解释.就像我们平 ...

  2. 目标检测之pycocotools安装

    从清华镜像源下载https://pypi.tuna.tsinghua.edu.cn/simple/pycocotools-windows/ wheel型包,pycocotools_windows-2. ...

  3. SSA

    wikipedia上关于SSA的定义如下: In compiler design, static single assignment form (often abbreviated as SSA fo ...

  4. C++ 可变数组实现

    话不多说,直接上代码,看注释 template<class T> // 支持传入泛型,但string这种可变长度的类型还不支持 class Array { int mSize = 0, m ...

  5. 全网最新最详细最明白教程之Spring源码搭建,没有之一,超详细

    相关帖子有很多但是都不是最新的Gradle,我在使用Gradle最新版编译的时候简直坑死我了,弄了好久.接下来给大家详细说一下这个安装过程,以及相关的软件版本号. 相关软件.依赖的版本号: Gradl ...

  6. HBase 与 Cassandra 架构对比分析的经验分享

    架构对比 HBase和Cassandra几乎是一个年份发起,又都是在2010年成为Apache的顶级项目,不过如果我们去细品其内部机制,我们会发现其实两者是完全不同的架构风格. HBASE起源于Goo ...

  7. nGrinder 参数使用

    背景: 性能测试中为了更加接近真实模拟现实应用,对于提交的信息每次都需要提交不同的数据,或使用不同的值,最为典型的就是登录时的账号. 性能测试工具需要提供动态参数化功能,如商业化的LoadRunner ...

  8. 洛谷2149 Elaxia的路线(dp+最短路)

    QwQ好久没更新博客了,颓废了好久啊,来补一点东西 题目大意 给定两个点对,求两对点间最短路的最长公共路径. 其中\(n,m\le 10^5\) 比较简单吧 就是跑四遍最短路,然后把最短路上的边拿出来 ...

  9. yum源安装nginx

    nginx使用yum源安装 安装步骤 使用yum源安装依赖 yum install yum-utils 配置nginx.repo的yum文件 vim /etc/yum.repos.d/nginx.re ...

  10. MIPS指令 MIPS架构

    华中科技大学 - 计算机组成原理 华中科技大学 - 计算机硬件系统设计 Microprocessor without Interlocked Pipleline Stages 无内部互锁流水级的微处理 ...