欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue this.$router.push(参数)实现页面跳转操作

程序员文章站 2022-05-09 09:43:13
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。push 后面可以是对象,也可以是字符串:...

很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。

push 后面可以是对象,也可以是字符串:

// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userid: wise }})

跳转页面并传递参数的方法:

1.params

由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

在路由配置文件中定义参数:

/* router.js 文件*/
import vue from "vue";
import router from "vue-router";
import mediasecond from "@/views/enterprisepage/mediamatrix/second"; //资讯列表
 
vue.use(router);
export default new router({
 routes: [ /* 进行路由配置 */
  {
    name: "mediasecond",
    path: "/mediasecond",
    component: mediasecond
  },
 ]
}) 
/* 后面还需要接一空行,否则无法通过 eslint 语法验证 */

通过name获取页面,传递params:

this.$router.push({ name: 'mediasecond',params:{artistname:artistname,imgurl:imgurl,type:2} })

在目标页面通过this.$route.params获取参数:

if (this.$route.params.type == 2) {
  this.type = apis.getatistdetails;
} else {
  this.type = apis.getmessagelist;
}

2.query

页面通过path/name和query传递参数,该实例中row为某行表格数据

this.$router.push({ name: 'detailmanagement', query: { auditid: row.id, type: '2' } });

this.$router.push({ path: '/detailmanagement', query: { auditid: row.id, type: '2' } });

在目标页面通过this.$route.query获取参数:

this.$route.query.type

补充知识:vue this.$router.push('./map');无法跳转的问题

<template>
 <div style="text-align: center">
  <el-button type="primary" style="margin-top: 40vh" @click="onlogin">登录</el-button>
 </div>
</template>
<script>
 export default {
  name: 'login',
  data () 
   return {
   }
  },
  methods: {
   onlogin:function () {
    this.$router.push('./map');
   }
  },
 }
</script>
<style scoped>
  
</style>

router中是这样引入的

import map from '@components/map'

点击事件无法跳转

2.解决方法:

改变引入方式

import map=r=>require.ensure([],()=>(require('../components/map')),'map')

这样通过静态引入就没问题了!

以上这篇vue this.$router.push(参数)实现页面跳转操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。