vue單頁應用,加入分頁後,點選到第二頁的時候,進入某個詳情頁,然後點選瀏覽器後退按鈕,並沒有返回到第二頁,而是返回到了首頁,並且重新整理了頁面,此時用keepAlive解決
import Vue from 'vue';
import Router from 'vue-router';
import CompanyList from '@/views/Company/List';
import CompanyDetail from '@/views/Company/Detail';
import ExpertList from '@/views/Expert/List';
import ExpertDetail from '@/views/Expert/Detail';
import ServiceBussiness from '@/views/Service/Bussiness';
import ServiceEngineer from '@/views/Service/Engineer';
import ServiceProduction from '@/views/Service/Production';
import ServiceTechnology from '@/views/Service/Technology';
Vue.use(Router);
const company = {
template: `
<div class="conpany">
<!-- <router-view> --> //原來沒有加keepAlive的寫法
**<keep-alive color="red" >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>**
</div>
`
};
const expert = {
template: `
<div class="expert">
**<keep-alive>
<router-view v-if ="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>**
</div>
`
};
const serviceS = {
template: `
<div class="service">
<router-view/>
</div>
`
};
export default new Router({
routes: [
{
path: '/',
redirect: '/expert/list',
},
{
path: '/company',
component: company,
children: [
{
path: 'list',
name: 'list',
component: CompanyList,
**meta: { // 加了keepAlive後新增的
keepAlive: true
}**
},
{
path: 'detail/:id',
name: 'detail',
component: CompanyDetail
}
]
},
{
path: '/expert',
name: 'expertList',
component: expert,
children: [
{
path: 'list',
name: 'list',
component: ExpertList,
meta: {
keepAlive: true
}
},
{
path: 'detail/:id',
name: 'expertDetail',
component: ExpertDetail
}
]
},
{
path: '/service',
component: serviceS,
children: [
{
path: 'bussiness',
name: 'list',
component: ServiceBussiness
},
{
path: 'engineer',
name: 'engineer',
component: ServiceEngineer
},
{
path: 'production',
name: 'production',
component: ServiceProduction
},
{
path: 'technology',
name: 'technology',
component: ServiceTechnology
}
]
}
]
});
給列表加了keepAlive ,這樣點選某一頁的時候,進入詳情頁,按後退按鈕,返回的是該頁
相關推薦
vue單頁應用,加入分頁後,點選到第二頁的時候,進入某個詳情頁,然後點選瀏覽器後退按鈕,並沒有返回到第二頁,而是返回到了首頁,並且重新整理了頁面,此時用keepAlive解決
import Vue from 'vue'; import Router from 'vue-router'; import CompanyList from '@/views/Company/List'; import CompanyDetail fr
vue單頁應用專案加入百度統計程式碼
在網上各種找不到vue專案加入百度統計的程式碼與實現: 自己探索出了一套加入百度統計的辦法,首先要明確一點,因為vue是單頁應用,所以直接加百度統計程式碼到index.html的header裡面是並沒
循序漸進VUE+Element 前端應用開發(30)--- ABP後端和Vue+Element前端結合的分頁排序處理
在很多列表展示資料的場合中,大多數都會需要一個排序的處理,以方便快速查詢排序所需的資料,本篇隨筆介紹如何結合ABP後端和Vue+Element前端結合的分頁排序處理過程。 1、Vue+Element前端的排序程式碼 我們首先參考一下Element介面元件的排序說明。如下效果是Element表格元件的排序效果。
使用vue-cli3開發vue專案並上傳到github使用github page展示首頁出現白屏的解決方案
今年企業對Java開發的市場需求,你看懂了嗎? >>>
關於解決WMI瀏覽器劫持問題--如果開了殺軟可能打不開本頁面,因為我貼了劫持指令碼...
這裡只說WMI的解決方法: 先說現象: 通過chrome快捷方式開啟後(包括開始選單和工作列裡的),直接會開啟一個流氓網站 檢視快捷方式發現“目標欄”裡,啟動路徑最後多了那個流氓網站的地址,刪除後,隔一段時間會再被加上去。 ==
點選瀏覽器後退按鈕,重新重新整理頁面,而不是從快取中獲取頁面,PHP的解決方案
背景:在A頁面中提交表單後,跳轉至結果頁B,在B頁單擊瀏覽器的後退按鈕,回到A頁面時,希望保留上次A頁面的查詢條件。 框架:ThinkPHP 3.2.3 核心程式碼: C('HTTP_CACHE_CONTROL', 'private, max-age=0, no-store, no-
js實現表單提交後不重新重新整理當前頁面,並停留在當前頁面
參考文章:http://www.cnblogs.com/limeiky/p/5599705.html 在填寫表單的時候,如果有某項為空或者不合法,在使用者點選提交後,頁面應當無法跳轉並且頁面內容不會重新整理;只有當用戶填寫內容滿足要求後,點選提交按鈕頁面才會跳轉到指定連結處
react中進入某個詳情頁URL路勁引數Id獲取問題
<Route path={`${match.url}/detail/:id`} component={AppManageAddDetail} /> const { match:{params:{ id, }}} = this.props; 一行程式碼直接搞定.
js監聽PC/手機/微信瀏覽器後退按鈕事件,可跳轉到指定頁面;
$(document).ready(function (e) { var counter = 0; if (window.history && window.history.pushState) {
最實用的vue重新整理當前頁面,provide / inject 組合 方式實現vue頁面重新整理
這是一種最實用的vue重新整理當前頁面,其他方式一般會出現一個瞬間的空白頁面,體驗不好,相當於按ctrl+F5 強制重新整理那種 方式:provide / inject 組合 方式實現vue頁面重新整理 1.修改App.vue程式碼如下圖所示 通過宣告reload方
自動重新整理網頁,自動重新整理當前頁面,JS呼叫
reload 方法,該方法強迫瀏覽器重新整理當前頁面。 語法:location.reload([bForceGet])
循序漸進VUE+Element 前端應用開發(4)--- 獲取後端資料及產品資訊頁面的處理
在前面隨筆《循序漸進VUE+Element 前端應用開發(3)--- 動態選單和路由的關聯處理》中介紹了在Vue + Element整合框架中,實現了動態選單和動態路由的處理,從而可以根據使用者角色對應的選單實現本地路由的過濾和繫結,選單順利弄好了,就需要進一步開發頁面功能了,本篇隨筆介紹一個案例,通過獲取後
vue 單頁應用點擊某個鏈接,跳轉到新頁面的方式
subst ams out 詳情 targe god str blank attribute <router-link class="goDetail" :to="{name: ‘detail‘,params: {id:item.id}}" target = _bl
在單頁應用中,如何優雅的監聽url的變化
單頁應用的原理從早起的根據url的hash變化,到根據H5的history的變化,實現無重新整理條件下的頁面重新渲染。那麼在單頁應用中是如何監聽url的變化呢,本文將總結一下,如何在單頁頁面中優雅的監聽url的變化。 單頁應用原理 監聽url中的hash變化 監聽通過his
用了seo-mask之後大有成效,解決單頁應用seo收錄難題
前言 看到標題的人肯定會問,seo-mask是什麼,為什麼可以解決單頁應用seo無法被收錄的難題呢? 簡單來講seo-mask做的就是為已經發佈線上運營的的單頁應用專案建立另一個簡單的利於seo的映象網站,使搜尋引擎能夠爬取到不同路徑下對應的內容,無需改造現有程式碼。 關於seo-mask的解釋及同樣能
vue單頁應用中,使用setInterval()定時向伺服器獲取資料,後來跳轉頁面後,發現還在不停的獲取資料。
使用VUE開發單頁專案時遇到這樣的問題,mounted中使用setInterval()定時向伺服器獲取資料,後來跳轉頁面後,發現還在不停的獲取資料。我以為是因為我路由用的push導致的,改成replace也是這樣,後來就在部落格園找到答案了,如下: http://www.cnblogs.com/zzbp/p/
[排坑]不要用vue腳手架了,webpack4.7搭建vue單頁(可改多頁)應用解決方案(路由懶載入等)
廢話不多說,的WebPack系列生態的更新速度真是讓人感覺每天趕飛機一樣,入坑已經很久,使用過程中避免不了將生態相關的外掛更新到新版,這個過程中可能會遇到很多坑,舉個最簡單的例子,當的WebPack剛剛出4的時候看起來很好的樣子,實際上相關的載入器和外掛沒有及時更新的時候就會
在單頁應用中,如何優雅的上報前端效能資料
最近在做一個較為通用的前端效能監控平臺,區別於前端異常監控,前端的效能監控主要需要上報和展示的是前端的效能資料,包括首頁渲染時間、每個頁面的白屏時間、每個頁面所有資源的載入時間以及每一個頁面中所以請求的響應時間等等。 本文的介紹的是如何設計一個通用的jssdk,可以以較小的侵入性,自動上報前端的
本來想寫到首頁的,然而發不了,就鐵這吧
rom code size -a 1.0 ont logs font from .f1 { } .f2 { } .f3 { } .f4 { } .f5 { } -o-@keyframes f1 { } -webkit-@keyframes f1 { } -o-@keyfra
回答了這四個問題,你就可以打造最佳App首頁
如果把手機APP比作人的話,首頁就是臉面了。首頁是一款產品的大門,好的開頭就是成功的一半。 調查表示,26%的手機APP的平均使用次數只有一次。對首次使用產品的用戶而言,首頁的好壞關乎到用戶對該產品的第一印象,無法在首頁取悅挑剔的用戶的眼睛,提供好的用戶體驗,基本就宣告了產品的失敗。因此,想