很多情況下，我們在執(zhí)行點(diǎn)擊按鈕跳轉(zhuǎn)頁面之前還會(huì)執(zhí)行一系列方法，這時(shí)可以使用 this.$router.push(location) 來修改 url，完成跳轉(zhuǎn)。

push 后面可以是對象，也可以是字符串：

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

跳轉(zhuǎn)頁面并傳遞參數(shù)的方法：

1.Params

由于動(dòng)態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。

及通過路由配置的name屬性訪問

在路由配置文件中定義參數(shù)：

/* 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: [ /* 進(jìn)行路由配置 */ { name: 'MediaSecond', path: '/MediaSecond', component: MediaSecond }, ]}) /* 后面還需要接一空行，否則無法通過 ESlint 語法驗(yàn)證 */

通過name獲取頁面，傳遞params：

this.$router.push({ name: ’MediaSecond’,params:{artistName:artistName,imgUrl:imgUrl,type:2} })

在目標(biāo)頁面通過this.$route.params獲取參數(shù)：

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

2.Query

頁面通過path/name和query傳遞參數(shù)，該實(shí)例中row為某行表格數(shù)據(jù)

this.$router.push({ name: ’DetailManagement’, query: { auditID: row.id, type: ’2’ } });

this.$router.push({ path: ’/DetailManagement’, query: { auditID: row.id, type: ’2’ } });

在目標(biāo)頁面通過this.$route.query獲取參數(shù)：

this.$route.query.type

補(bǔ)充知識：vue this.$router.push(’./map’);無法跳轉(zhuǎn)的問題

<template> <div style='text-align: center'> <el-button type='primary' @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’

點(diǎn)擊事件無法跳轉(zhuǎn)

2.解決方法：

改變引入方式

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

這樣通過靜態(tài)引入就沒問題了！

以上這篇Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁面跳轉(zhuǎn)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。