显示传参模式 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. 迷你商城后端管理系统 ———— stage2 项目的核心代码实现

    应用程序主函数接口 @SpringBootApplication(scanBasePackages = {"org.linlinjava.litemall.db", "o ...

  2. PHP多文件上传格式化

    文件上传是所有web应用中最常见的功能,而PHP实现这一功能也非常的简单,只需要前端设置表单的 enctype 值为 multipart/form-data 之后,我们就可以通过 $_FILES 获得 ...

  3. 开源ASR服务器vosk

    概述 近几年由于AI的迅速发展,语音相关的自然语言处理NLP项目也变多了,新的技术也越来越成熟,其中TTS(语音生成)和ASR(语音识别)是NLP中非常重要的环节. 今天我们介绍一个开源的ASR项目v ...

  4. Java基础系列(12)- 运算符

    运算符 算数运算符:+ - * / % ++ -- 赋值运算符:= += -= *= /= 关系运算符:> < >= <= == != instanceof 逻辑运算符:&am ...

  5. lightweight openpose 入门实操笔记(pytorch环境)

    最近有个小项目要搞姿态识别,简单调研了一下2D的识别: 基本上是下面几种 (单人)single person 直接关键点回归 heatmap,感觉其实就是把一个点的标签弄成一个高斯分布 (多人)mul ...

  6. 谷歌浏览器chrome安装插件报"程序包无效: CRX_HEADER_INVALID"错误

    今天参加需求评审,看到原来可以谷歌浏览器查看Axure原型文件,真是只有想不到,没有做不到(自己孤陋寡闻了,第一次接触Axure). 需求评审后,我百度"如何使用谷歌浏览器查看Axure原型 ...

  7. 鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main | 百篇博客分析OpenHarmony源码 | v51.04

    百篇博客系列篇.本篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并不是main | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | ...

  8. P2179-[NOI2012]骑行川藏【导数,二分】

    正题 题目链接:https://www.luogu.com.cn/problem/P2179 题目大意 给出\(E\)和\(n\)个\(s_i,k_i,u_i\)求一个序列\(v_i\)满足 \[\s ...

  9. vue成就购物城的功能 (展示增删改查)

    <!DOCTYPE html><html> <!DOCTYPE html> <html> <head> <meta charset=& ...

  10. Monte-carlo-simulation

    https://towardsdatascience.com/how-to-use-monte-carlo-simulation-to-help-decision-making-a0a164bc861 ...