vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
最新推荐文章于 2023-09-06 16:04:01 发布
最新推荐文章于 2023-09-06 16:04:01 发布
阅读量2.1k
const
procInsId
=
row
.
procInsId
;
const
deployId
=
row
.
deployId
;
const
taskId
=
row
.
taskId
;
router
.
push
(
{
path
:
'/flow/my/process/submit'
,
query
:
{
procInsId
:
procInsId
,
deployId
:
deployId
,
taskId
:
taskId
,
finished
:
true
,
return
{
handleFlowRecord
编辑器提示如下错误
Argument type
{path: string, query:
{procInsId: any, finished: boolean, deployId: (any | null), taskId: any}}
is not assignable to parameter type RouteLocationRaw
查阅可知,router.push是使用字符串传递参数的,并不支持布尔类型,也就是如下图
finished: true ×
finished: "true" √
所以我们应该使用 eval()
它的作用是把对应的字符串解析成js代码并运行
经过修改如下
setup(){
const router = useRouter();
const handleFlowRecord = (row) => {
console.log(row)
const procInsId = row.procInsId;
const deployId = row.deployId;
const taskId = row.taskId;
router.push({
path: '/flow/my/process/submit',
query: {
procInsId: procInsId,
deployId: deployId,
taskId: taskId,
finished: eval("true"),
return {
handleFlowRecord
vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
* 重写路由的push方法
* 解决,相同路由跳转时,报错
* 添加,相同路由跳转时,触发watch (针对el-menu,仅限string方式传参,形如"view?id=5")
// 保存原来的push函数
const routerPush = Router.prototype.push
// 重写push函数
Router.prototype.push = function push(
vue2.0中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和$route ,有些傻傻分不清,后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的
TypeScript语法错误:Argument of type ‘string‘ is not assignable to parameter of type ‘Element‘. 解决方法
TypeScript语法错误:
TS2345: Argument of type ‘string’ is not assignable to parameter of type ‘Element’.
类型"string"的参数不能赋给类型"Element"的参数。
报错内容以及对应代码:
报错的原因在于,该函数可接收的参数类型和实际接收的不匹配。
所以解决的方法是,将第二个参数转换成Element类型;或者更换另一种方法,插入元素的同时,还支持stri
* 重写路由的push方法
* 解决,相同路由跳转时,报错
* 添加,相同路由跳转时,触发watch (针对el-menu,仅限string方式传参,形如"view?id=5")
co...
出现上述的问题是vue-router:“^3.5.3"最新出的vue-router引入了promise(当我们点击了router.push()以后返回的 是一个promise对象。
2.解决的方案:
1.通过给push方法传递相应的成功,失败、的回调,可以通过捕获到当前的错误,可以解决(但不是最根本的方法),将来在别的组件中push|replace.编程式导航还是有类似的错误。
2.重写route.
代码如下:exportdefaultnewRouter({
mode:'history',//路由模式,取值为history与hash
base:'/',//打包路径,默认为/,可以修改
routes:[
path:string,//路径
ccomponent:Component;//...
在Vue 3中,你可以使用`router.push`方法来进行路由跳转并传递参数。
假设你有一个名为`Home`的组件,并且你想要通过路由跳转到该组件,并传递一个名为`id`的参数,你可以按照以下步骤进行操作:
1. 首先,确保你已经安装了Vue Router,并且在项目中正确配置了路由。
2. 在需要跳转的地方,比如一个按钮的点击事件中,使用`router.push`方法进行路由跳转。例如:
```javascript
// 导入Vue Router实例
import { createRouter, createWebHistory } from 'vue-router'
// 创建Vue Router实例
const router = createRouter({
history: createWebHistory(),
routes: [
// ...你的其他路由配置
// 在某个事件触发时进行路由跳转并传递参数
router.push({ name: 'Home', params: { id: 123 } })
在这个例子中,我们通过`router.push`方法进行了路由跳转,并传递了一个名为`id`的参数,其值为`123`。你可以根据你的需要修改参数的名称和值。
3. 在接收参数的组件中,你可以通过`$route.params`来获取传递过来的参数。例如,在`Home`组件中:
```javascript
export default {
mounted() {
// 获取传递过来的id参数
const id = this.$route.params.id
console.log(id) // 输出:123
通过`this.$route.params`,你可以获取传递过来的参数,并在需要的地方进行使用。
这就是在Vue 3中使用`router.push`进行路由跳转并传递参数的方法。希望对你有所帮助!如果还有其他问题,请随时提问。
element-plus type.text is about to be deprecated in version 3.0.0, please use link instead.
springboot Flowable集成 Error creating bean with name ‘flowableAppEngine‘ flowableException
qq_43990304:
maven3.6.3下载与安装。安装教程(新手向最完整教程)
weixin_45354350:
springboot Flowable集成 Error creating bean with name ‘flowableAppEngine‘ flowableException
yigenmala:
element-plus type.text is about to be deprecated in version 3.0.0, please use link instead.
springboot Flowable集成 Error creating bean with name ‘flowableAppEngine‘ flowableException