vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)
更新時(shí)間：2023年12月04日 16:07:37 作者：Rainbow_Xjj
這篇文章主要介紹了vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue this.$router.go(-1);返回時(shí)如何帶參數(shù)
1. 聲明一個(gè)空的Vue模塊eventBus
import Vue from 'vue'
/**
* 定義空的vue實(shí)例，作為 eventbus實(shí)現(xiàn)非父子組件之間的通信(vue2.x中去掉了broadcast)
*/
var eventBus = new Vue({});
export default eventBus;2.“列表頁”通過eventBus.$emit傳參給上一個(gè)頁面
import eventBus from '../../../static/js/eventbus.js';
//返回
back(info){
//傳遞一個(gè)map，addressInfo是key，info是value
eventBus.$emit('addressInfo',info);
//調(diào)用router回退頁面
this.$router.go(-1);
},3. 頁面接收參數(shù)
import eventBus from '../../../static/js/eventbus.js';
activated(){
//根據(jù)key名獲取傳遞回來的參數(shù)，data就是map
eventBus.$on('addressInfo', function(data){
console.log(data,"data");
}.bind(this));
},vue $router.go(-1)的使用
在項(xiàng)目中可能會(huì)遇到這樣的問題，就是跳到詳情在返回來還希望保持原來的搜索結(jié)果，就是不希望刷新，這個(gè)時(shí)候呢keep-alive就起到了很大的作用
接下來就說說如何使用keep-alive來動(dòng)態(tài)緩存頁面的。
直接在外邊加一層keep-alive就是全部緩存，返回都不刷新
比如在App.vue
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>配合路由使用，動(dòng)態(tài)去緩存你所需要緩存的，而不是全部緩存
需要在router.js里邊配置
const router = new Router({
// mode: 'history',
routes: [{
path: '/', // 這個(gè)斜杠就是默認(rèn)跳轉(zhuǎn)的頁面
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, //設(shè)置此項(xiàng)則表示必須登錄才能進(jìn)入
keepAlive: false, //若為false則初始不緩存，若為true則表示緩存
}
},
{
path: '/index2',
name: 'index2',
component: resolve => require(['@/components/index2'], resolve),
meta: {
requiresAuth: true
}
}]
}）然后在路由導(dǎo)航守衛(wèi)去做權(quán)限處理
我是寫在route/index.js中，這個(gè)看你不要求
// 判斷是否需要登錄權(quán)限 以及是否登錄
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>當(dāng)我們使用緩存的時(shí)候
如果遇到我們界面做了一些操作，然后跳轉(zhuǎn)回來需要把一些數(shù)據(jù)默認(rèn)為原本的值
可以使用watch來監(jiān)聽$router
watch:{
$router:{
handler(val){
if(val.name==='menberList'){
this.getTableData()
}
}
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 無限滾動(dòng)列表性能優(yōu)化方案
這篇文章主要介紹了Vue.js 無限滾動(dòng)列表性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文給大家介紹了vue路由攔截的三種方法,全局前置守衛(wèi),路由獨(dú)享守衛(wèi)和全局后置鉤子這三種方法,并通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue-router權(quán)限控制(簡單方式)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，感興趣的朋友一起看看吧2016-09-09
對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
今天小編就為大家分享一篇對vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue3中的onMounted生命周期鉤子,它在組件掛載到DOM后執(zhí)行代碼,onMounted只調(diào)用一次,適合進(jìn)行異步操作、DOM操作和事件監(jiān)聽,在使用時(shí)需要注意組件銷毀和響應(yīng)式數(shù)據(jù)的管理,需要的朋友可以參考下2024-11-11
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue生態(tài)系統(tǒng)工具庫Vueuse的使用示例詳解
Vueuse 是一個(gè)功能強(qiáng)大的 Vue.js 生態(tài)系統(tǒng)工具庫,它提供了一系列的可重用的 Vue 組件和函數(shù),本文將介紹 Vueuse 的主要特點(diǎn)和用法,以及它在 Vue.js 開發(fā)中的作用和優(yōu)勢,感興趣的可以了解下2024-02-02
vue3實(shí)現(xiàn)局部頁面刷新效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何采用 App.vue定義全局變量與方法并實(shí)現(xiàn)局部頁面刷新效果,文中的示例代碼講解詳細(xì),需要的可以參考一下2024-01-01
vue中watch監(jiān)聽器用法之deep、immediate、flush
Vue是可以監(jiān)聽到多層級數(shù)據(jù)改變的,且可以在頁面上做出對應(yīng)展示,下面這篇文章主要給大家介紹了關(guān)于vue中watch監(jiān)聽器用法之deep、immediate、flush的相關(guān)資料,需要的朋友可以參考下2022-09-09