Vue中$router.push()路由切换及如何传参和获取参数 |
您所在的位置：网站首页 › vue路由跳转传参params › Vue中$router.push()路由切换及如何传参和获取参数 |
|
Vue中$router.push()路由切换及如何传参和获取参数
1、路由的两种常见方式 1）声明式： Home User 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({path:"/login",query:{message:"页面跳转成功"}}) 新页面/路由中 获取参数 console.log(this.$route.query.message); 2）params方式 this.$router.push({name:"loginPage",params:{message:"页面跳转成功"}})新页面/路由中 获取参数 console.log(this.$route.params.message);注意：this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面及通过路由配置的name属性访问 两种方式的区别是： query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏（刷新后参数失效）。总结 关于Vue中$router.push()路由切换及如何传参和获取参数的文章就介绍至此，更多相关Vue $router.push()路由切换内容请搜索编程宝库以前的文章，希望以后支持编程宝库！ 下一节：JS封装转换前后端接口数据格式工具函数下划线大写JS 编程技术一、前言这段时间接近年底，公司的业务也不是很繁忙，有些闲暇的时间，就模仿ruoyi写一个后台系统，技术栈前端是react18，后端为koa2；在一个接口返回数据 ... |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |