Vue中$router.push()路由切换及如何传参和获取参数
更新时间：2023年03月31日 09:41:34 作者：你知不知
这篇文章主要给大家介绍了关于Vue中$router.push()路由切换及如何传参和获取参数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
1、路由的两种常见方式
1）声明式：
<router-link to="/login">
<router-link :to="{ path: '/login' }">Home</router-link>
<router-link :to="{ name: 'loginPage'}">User</router-link>
2）编程式：$router.push(...)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
// 假如现有的路由是（router.js中的登录）
import LoginPage from "@/views/Login.vue";
const router = new VueRouter({
[{ path: "/login", name: "loginPage", component: LoginPage }]
});
// 字符串（对应填写上面的path）
this.$router.push('/login')
// 对象
this.$router.push({path: '/login'});
// 通过路由的 name（对应的就是上面的name）
this.$router.push({ name: 'loginPage' })
2、传参和获取参数（query和params）
1）query方式
this.$router.push({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->path:"/login",query:{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->message:"页面跳转成功"}})新页面/路由中 获取参数
console.log(this.$route.query.message);
2）params方式
this.$router.push({<!--{C}%3C!%2D%2D%20%2D%2D%3E-->name:"loginPage",params:{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->message:"页面跳转成功"}})新页面/路由中 获取参数
console.log(this.$route.params.message);
注意：
this.$router.push()方法中path不能和params一起使用，否则params将无效。需要用name来指定页面及通过路由配置的name属性访问
两种方式的区别是：
- query传参的参数会带在url后边展示在地址栏，
- params传参的参数不会展示到地址栏（刷新后参数失效）。
总结
到此这篇关于Vue中$router.push()路由切换及如何传参和获取参数的文章就介绍到这了,更多相关Vue $router.push()路由切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Vue3中对VDOM的改进，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间，可以直接搭配vue使用2022-11-11
vue draggable resizable 实现可拖拽缩放的组件功能
这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vue的axios使用post时必须使用qs.stringify而get不用问题
这篇文章主要介绍了vue的axios使用post时必须使用qs.stringify而get不用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了uni-app在线预览pdf文件的相关资料,本文主要介绍了如何在Vue项目中使用PDF.js插件进行PDF文件的预览,包括插件的下载、版本兼容问题的处理,以及在static文件夹下新建pdf文件夹存放解压文件,需要的朋友可以参考下2024-10-10
Vue中对watch的理解(关键是immediate和deep属性)
watch侦听器，是Vue实例的一个属性，是用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，这篇文章主要介绍了Vue中对watch的理解,需要的朋友可以参考下2022-11-11
这篇文章介绍了Vue项目中使用Bootstrap的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求，本文主要介绍了vue+ts大文件切片上传，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式)
这篇文章主要介绍了vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
最新评论