显示传参模式 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. 深入学习Composer原理(一)

    Composer作为PHP的包管理工具,为PHPer们提供了丰富的类库,并且让PHP重焕新生,避免被时代淘汰的悲剧.可以说,Composer和PHP7是现在PHP开发者的标配,如果你还没用过Compo ...

  2. div居中和垂直居中的最简单方法

    div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...

  3. Dapr + .NET Core实战(五)Actor

    什么是Actor模式 Actors 为最低级别的"计算单元" 以上解释来自官方文档,看起来"晦涩难懂".大白话就是说Actors模式是一段需要单线程执行的代码块 ...

  4. 博客主题——element v2

    主题预览 主题下载 gshang.element-v2.rar

  5. jmeter调度器的使用

    前言 使用jmeter 做压测的时候,希望对一个接口持续压测 10 分钟或者半小时,可以使用调度器设置持续压测时间. https://www.cnblogs.com/yoyoketang/p/1415 ...

  6. python pip 安装使用国内镜像源

    国内镜像源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 ...

  7. centos7.0 能ping通ip 无法ping通域名处理方法

    第一步: 检查 vi   /etc/sysconfig/network-scripts/ifcfg-eth0 查看网卡配置里的dns是否与 vi  /etc/resolv.conf 的 nameser ...

  8. 基于C++的ButeBuf封装

    目录 1.说明 2.代码 1.说明 netty 的 ByteBuf 中的 readerIndex 和 writerIndex 的设置十分巧妙,它内部对读取和写入位置进行控制,避免自己处理index的时 ...

  9. windows下将Anaconda移位置(C盘转移至D盘)

    1.首先说明一下我的安装情况: (1)Window10系统 (2)Anaconda安装在C盘 2.由于Anaconda安装在C盘经常会涉及权限问题,在安装torch的时候让我萌发了转移磁盘的想法(拒绝 ...

  10. Visual Studio Docker调试端口设置

    一.前言 在Visual Studio 调试程序时,Docker中的容器端口和主机端口映射随机生成,导致每次调试都需要修改前端API接口的地址 二.解决方案 1.修改Docker调试启动参数,找到启动 ...