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 } }) 接受参数页 ...
随机推荐
- 深入学习Composer原理(一)
Composer作为PHP的包管理工具,为PHPer们提供了丰富的类库,并且让PHP重焕新生,避免被时代淘汰的悲剧.可以说,Composer和PHP7是现在PHP开发者的标配,如果你还没用过Compo ...
- div居中和垂直居中的最简单方法
div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...
- Dapr + .NET Core实战(五)Actor
什么是Actor模式 Actors 为最低级别的"计算单元" 以上解释来自官方文档,看起来"晦涩难懂".大白话就是说Actors模式是一段需要单线程执行的代码块 ...
- 博客主题——element v2
主题预览 主题下载 gshang.element-v2.rar
- jmeter调度器的使用
前言 使用jmeter 做压测的时候,希望对一个接口持续压测 10 分钟或者半小时,可以使用调度器设置持续压测时间. https://www.cnblogs.com/yoyoketang/p/1415 ...
- python pip 安装使用国内镜像源
国内镜像源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 ...
- centos7.0 能ping通ip 无法ping通域名处理方法
第一步: 检查 vi /etc/sysconfig/network-scripts/ifcfg-eth0 查看网卡配置里的dns是否与 vi /etc/resolv.conf 的 nameser ...
- 基于C++的ButeBuf封装
目录 1.说明 2.代码 1.说明 netty 的 ByteBuf 中的 readerIndex 和 writerIndex 的设置十分巧妙,它内部对读取和写入位置进行控制,避免自己处理index的时 ...
- windows下将Anaconda移位置(C盘转移至D盘)
1.首先说明一下我的安装情况: (1)Window10系统 (2)Anaconda安装在C盘 2.由于Anaconda安装在C盘经常会涉及权限问题,在安装torch的时候让我萌发了转移磁盘的想法(拒绝 ...
- Visual Studio Docker调试端口设置
一.前言 在Visual Studio 调试程序时,Docker中的容器端口和主机端口映射随机生成,导致每次调试都需要修改前端API接口的地址 二.解决方案 1.修改Docker调试启动参数,找到启动 ...