Vue router重定向redirect如何传值问题

 更新时间:2023年10月23日 16:44:57   作者:352328759  
这篇文章主要介绍了Vue router重定向redirect如何传值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue router重定向redirect如何传值

配置 vue_router 时, 很经常就用到重定向(redirect)功能

例如:

没登录重定向到登录页面(导航卫士拦截也是高效的登录检查方法)

index, home, house 重定向到首页等

重定向 redirect 可接受的值

字符串

字符串作为 path 传入, 相当于 { path: redirect }

{
	...
	redirect: "/assets/assetsIndex",
	...
}
// 相当于
{
	...
	redirect: { path: '/assets/assetsIndex' },
	...
}

对象

先判断有没有 name

有 name

发起跳转处提供的 name, query, hash, params 会往下传

如果 redirect 也提供了这些属性则用 redirect 提供的往下传

redirect: {
	name: 'assetsIndex',
	params: { id: 'redirect' },
}
// redirect 提供了 params, 目标组件可以收到该 params 数据
// redirect 没有提供, 目标组件收到发起跳转处的数据(发起跳转是有数据的话)

没有 name, 就找 path

计算后的 path 和 query, hash 会往下传

如果 redirect 也提供了这些属性则用 redirect 提供的往下传

redirect: {
	path: 'assetsIndex',
	query: { id: 'redirect' },
}

方法

方法必须 return 一个字符串

return 的内容最终作为 path 往下传

所以提供的 params 将无效

redirect: function (to) {
	return 'assetsIndex'
}

这些不需要传参的情况, 直接设置为目标地址的字符串就可以

{
	path: "/assets",
	component: layout,
	redirect: "/assets/assetsIndex",
}

如果你遇到的需求需要传值的话, 可以参考下面的方法

query 带参跳转

query 直接带参就可以了, 缺点是地址中会暴露参数

// 发起跳转
this.$router.push({ name: 'assets', query: { val: 'val值' } })
/* or */
this.$router.push({ path: '/assets', query: { id: '编程式_id' } })
/* or */
this.$router.push("/assets?id=编程式_id")

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: "/assetsHome",
}

// 目标路由
{
	path: "/assetsHome",
	component: assetsHome,
},

// 目标组件中取值
this.$route.query

params 带参跳转

params 带参相对麻烦, 因为"如果提供了 path,params 会被忽略"在 redirect 中也是成立的

所以我们可以知道, 不可以用 path 来设置路由

而 params 带参的好处当然就是可以在地址隐藏参数了

// 发起跳转
this.$router.push({ name: 'assets', params: { id: '编程式_id' } })

// 重定向
{
	path: "/assets",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目标路由
{
	path: "/assetsHome",
	name: "assetsHome",
	component: assetsHome,
}

// 目标组件中取值
this.$route.params

动态路径带参跳转

本来是不想写这个方法的, 因为笔者本来就很讨厌动态路径带参, 觉得那个方法局限性太大, 加一个参数很麻烦, 还要顺序要求

为了不要被读者吐槽我懒(敲代码本来就是为了偷懒嘛), 还是稍微写一下

// 发起跳转
this.$router.push({ path: '/assets/编程式_id' })

// 重定向
{
	path: "/assets/:id",
	name: "assets",
	redirect: { name: 'assetsHome' },
}

// 目标路由
{
	path: "/assetsHome/:id",
	name: "assetsHome",
	component: assetsHome,
}

// 目标组件中取值
this.$route.params

[题外话] 重定向和别名的区别

重定向是进入 a, 然后自动跳转到 b

a 和 b 都是真实的路由地址, 这个过程经过两地址, 只是 a 不会被记录

别名是进入 a, 实际上是进入 b

a 不是真实的路由地址, 这个过程自始至终都只是在 b 地址

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何解决elementUI打包上线后icon图标偶尔乱码问题

    如何解决elementUI打包上线后icon图标偶尔乱码问题

    文章描述了在使用若依框架开发过程中遇到的图标乱码问题,通过分析发现是由于sass编译器将Unicode编码转换为明文导致的,文章提供了四种处理方法:使用css-unicode-loader、升高sass版本、替换element-ui的样式文件和更换打包压缩方式
    2025-01-01
  • vue3+vite使用svg图片方式

    vue3+vite使用svg图片方式

    这篇文章主要介绍了vue3+vite使用svg图片方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2026-03-03
  • vue3.0中使用element的完整步骤

    vue3.0中使用element的完整步骤

    这篇文章主要给大家介绍了关于vue3.0中使用element的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 如何使用vue3打造一个物料库

    如何使用vue3打造一个物料库

    这篇文章主要介绍了如何使用vue3打造一个物料库,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • Vue3中使用ref与reactive创建响应式数据的示例代码

    Vue3中使用ref与reactive创建响应式数据的示例代码

    这篇文章主要介绍了Vue3中使用ref与reactive创建响应式数据的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-08-08
  • vue3 + element-plus 的 upload + axios + django 实现文件上传并保存功能

    vue3 + element-plus 的 upload + axios + django 实现文件上

    这篇文章主要介绍了vue3 + element-plus 的 upload + axios + django 文件上传并保存,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    这篇文章主要介绍了element-plus 在vue3 中不生效的原因解决方法(element-plus引入),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题

    vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题

    这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    触底时,继续向后端发请求获取下一页的数据,请求回来的数据合并给options,这篇文章主要介绍了ElementPlus 中el-select自定义指令实现触底加载请求options数据的操作方法,需要的朋友可以参考下
    2024-08-08
  • vue中的路由拦截器的作用详解

    vue中的路由拦截器的作用详解

    在Vue中,路由拦截器主要用于在导航到某个路由前或者离开某个路由时进行拦截和处理,下面给大家介绍vue中的路由拦截器的作用,感兴趣的朋友一起看看吧
    2024-07-07

最新评论