显示传参模式 get

  1. import { useRouter } from 'vue-router';
  2. const router = useRouter();
  3. let skipEdit = (key: string, res: any) => { // 个人需求函数自行省略
  4. router.push({
  5. path: 'editRole',
  6. query: {
  7. key: key,
  8. body: res,
  9. },
  10. });
  11. };
  12. // 接收
  13. import { useRoute } from 'vue-router';
  14. setup() {
  15. const route = useRoute(); // 1
  16. let res: any = ref({});
  17. let get = async () => {
  18. res.value = await getParticulars({ categoryName: route.query.name // 2 });
  19. };
  20. onMounted(get);
  21. return {
  22. columns,
  23. get,
  24. res,
  25. };
  26. },

隐式传参模式 post

  1. import { useRouter } from 'vue-router';
  2. const router = useRouter();
  3. let skipEdit = (key: string, res: any) => { // 个人需求函数自行省略
  4. router.push({
  5. name: 'EditRole',
  6. params: {
  7. key: key,
  8. body:JSON.stringify(res),
  9. },
  10. });
  11. };
  12. // 接收
  13. setup() {
  14. const route: any = useRoute();
  15. if (route.params.body) {
  16. let obj = JSON.parse(route.params.body);
  17. console.log(JSON.parse(obj));
  18. }
  19. return {
  20. date,
  21. };
  22. },

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. python 爬虫新手入门教程

    python 爬虫新手教程 一.什么是爬虫 爬虫就是把一个网站里的内容读取下来 这里我们就要学习一个知识 我们看到的网页是有一种叫HTML的语言编写的 他可以给文字显示不同的样式 如:<p> ...

  2. nginx 禁止某IP访问

    首先建立下面的配置文件放在nginx的conf目录下面,命名为blocksip.conf: deny 95.105.25.181; 保存一下. 在nginx的配置文件nginx.conf中加入:inc ...

  3. gin 源码阅读(2) - http请求是如何流入gin的?

    推荐阅读: gin 源码阅读(1) - gin 与 net/http 的关系 本篇文章是 gin 源码分析系列的第二篇,这篇文章我们主要弄清一个问题:一个请求通过 net/http 的 socket ...

  4. pyqt5设计无边框窗口(一)

    import sys from PyQt5 import QtGui,QtCore from PyQt5 import QtCore, QtGui, QtWidgets ############### ...

  5. NetCore5实现https请求

    前言 本文主要介绍在NetCore5中,实现证书加载和https访问请求. 证书准备 首先我们先创建一个自定义的证书Kiba518.pfx. 证书创建参考:最通俗易懂的RSA加密解密指导. 然后将证书 ...

  6. 51nod1821-最优集合【贪心】

    正题 题目链接:http://www.51nod.com/Challenge/Problem.html#problemId=1821 题目大意 \(n\)个可重集合,\(T\)次询问,询问将集合\(S ...

  7. P4173-残缺的字符串【FFT】

    正题 题目链接:https://www.luogu.com.cn/problem/P4173 题目大意 给出两个字符串\(S,T\),其中包含小写字母和一些\(?\),\(?\)可以匹配任何字符. 求 ...

  8. CF1392G-Omkar and Pies【dp】

    正题 题目链接:https://www.luogu.com.cn/problem/CF1392G 题目大意 两个长度为\(k\)的起始和目标01串. \(n\)个操作交换起始串的两个位置,选择一段长度 ...

  9. Winform 实现图片轮播(解决Image.FromFile内存不足)

    前言 最近项目中需要在winform中做一个类似于网页那种轮播的效果,这里做下记录. 实现 整体的实现思路如下: 读取图片文件夹. 建立一个集合存储Image对象. 定时器定时更换PictrueBox ...

  10. 关于 Binomial Coefficient is Fun

    题目传送门 Solution 应该这个做法不是很常见吧. 我们设 \(f_{i,j}\) 表示前面 \(i\) 个数,选出的数和为 \(j\) 的贡献之和.因为我们有以下式子: \[\sum_{i=a ...