Vue中this.$router.push(参数) 实现页面跳转
时间:2021-12-21 作者:houxianzhou
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$域名(location) 来修改 url,完成跳转。
push 后面可以是对象,也可以是字符串:
// 字符串 this.$域名(\'/home/first\') // 对象 query相当与发送了一次get请求,请求参数会显示在浏览器地址栏中 this.$域名({ path: \'/home/first\' }) // 命名的路由 params相当与发送了一次post请求,请求参数则不会显示,并且刷新页面之后参数会消失 this.$域名({ name:\'Login\', params: { id: 域名 } ) // 当路由配置更改为 //路由配置: //{path:\'/login/:id\',name:\'Login\',component:Login} //并且再次发送请求,请求数据不会随着页面的刷新而消失
跳转页面并传递参数的方法:
域名ms
由于动态路由也是传递params的,所以在 this.$域名() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。
及通过路由配置的name属性访问
在路由配置文件中定义参数:
/* 域名 文件*/ import Vue from "vue"; import Router from "vue-router"; import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表 域名(Router); export default new Router({ routes: [ /* 进行路由配置 */ { name: "MediaSecond", path: "/MediaSecond", component: MediaSecond }, ] }) /* 后面还需要接一空行,否则无法通过 ESlint 语法验证 */
通过name获取页面,传递params:
this.$域名({ name: \'MediaSecond\',params:{artistName:artistName,imgUrl:imgUrl,type:2} })
在目标页面通过this.$域名ms获取参数:
if (this.$域名 == 2) { 域名 = 域名tistDetails; } else { 域名 = 域名essageList; }
域名y
页面通过path/name和query传递参数,该实例中row为某行表格数据
this.$域名({ name: \'DetailManagement\', query: { auditID: 域名, type: \'2\' } }); this.$域名({ path: \'/DetailManagement\', query: { auditID: 域名, type: \'2\' } });
在目标页面通过this.$域名y获取参数:
this.$域名
写在最后:关于vue路由还有很多方式,简单总结,如有不对欢迎大佬们指正!!!