vue?this.$router.go(-1);返回時如何帶參數
更新時間：2023年12月04日 16:07:37 作者：Rainbow_Xjj
這篇文章主要介紹了vue?this.$router.go(-1);返回時如何帶參數問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue this.$router.go(-1);返回時如何帶參數
1. 聲明一個空的Vue模塊eventBus
import Vue from 'vue'
/**
* 定義空的vue實例，作為 eventbus實現非父子組件之間的通信(vue2.x中去掉了broadcast)
*/
var eventBus = new Vue({});
export default eventBus;2.“列表頁”通過eventBus.$emit傳參給上一個頁面
import eventBus from '../../../static/js/eventbus.js';
//返回
back(info){
//傳遞一個map，addressInfo是key，info是value
eventBus.$emit('addressInfo',info);
//調用router回退頁面
this.$router.go(-1);
},3. 頁面接收參數
import eventBus from '../../../static/js/eventbus.js';
activated(){
//根據key名獲取傳遞回來的參數，data就是map
eventBus.$on('addressInfo', function(data){
console.log(data,"data");
}.bind(this));
},vue $router.go(-1)的使用
在項目中可能會遇到這樣的問題，就是跳到詳情在返回來還希望保持原來的搜索結果，就是不希望刷新，這個時候呢keep-alive就起到了很大的作用
接下來就說說如何使用keep-alive來動態(tài)緩存頁面的。
直接在外邊加一層keep-alive就是全部緩存，返回都不刷新
比如在App.vue
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>配合路由使用，動態(tài)去緩存你所需要緩存的，而不是全部緩存
需要在router.js里邊配置
const router = new Router({
// mode: 'history',
routes: [{
path: '/', // 這個斜杠就是默認跳轉的頁面
name: 'index',
component: resolve => require(['@/components/index'], resolve),
meta: {
requiresAuth: true,
keepAlive: false,
}
},
{
path: '/index',
name: 'index',
component: resolve => require(['@/components/index'], resolve),
meta: {
requiresAuth: true, //設置此項則表示必須登錄才能進入
keepAlive: false, //若為false則初始不緩存，若為true則表示緩存
}
},
{
path: '/index2',
name: 'index2',
component: resolve => require(['@/components/index2'], resolve),
meta: {
requiresAuth: true
}
}]
}）然后在路由導航守衛(wèi)去做權限處理
我是寫在route/index.js中，這個看你不要求
// 判斷是否需要登錄權限 以及是否登錄
router.beforeEach((to, from, next) => {
if (to.path == '/orderDs' || to.path == '/interveneDs' || to.path == '/afterSaleDs' || to.path == '/checkDs' || to.path == '/auditDs' || to.path == '/addVertising' || to.path == '/buyerDs' || to.path == '/gsQueryDs') {
from.meta.keepAlive = true; // from.meta 表示緩存列表頁
next();
}else{
from.meta.keepAlive = false;
next();
}
})
export default router接下來看看在app.vue中的處理
<template>
<div id="app">
需要緩存的
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
不需要緩存的
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>當我們使用緩存的時候
如果遇到我們界面做了一些操作，然后跳轉回來需要把一些數據默認為原本的值
可以使用watch來監(jiān)聽$router
watch:{
$router:{
handler(val){
if(val.name==='menberList'){
this.getTableData()
}
}
}
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element-ui中Table表格省市區(qū)合并單元格的方法實現
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項目中如何引入cesium問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2018-04-04
之前使用 ElementPlus 做項目的時候,由于不會使用按需引入耽誤了不少時間,這篇文章主要給大家介紹了關于element-plus自動導入和按需導入的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了在Vue中用canvas實現二維碼和圖片合成海報的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要為大家詳細介紹了vue實現全選、反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06