vue中使用addRoutes動態(tài)添加路由后刷新失效如何解決,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設、樂安網(wǎng)站維護、網(wǎng)站推廣。
1.按鈕點擊,保存路由并跳轉
(1).在router/index.js里聲明一個數(shù)組,里邊是一些固定的路由,比如你的登錄頁面、404等等
//router/index.js export const constantRouterMap=[ { path: '/', // name: 'HelloWorld', component: HelloWorld } ] Vue.use(Router) export default new Router({ routes: constantRouterMap })
(2).按鈕點擊,跳轉、保存路由;
注意,保存路由這一步驟,要做進要跳轉到的組件里,這是為了防止在beforeEach攔截這邊產(chǎn)生死循環(huán)
添加路由需要兩點,一是path,二是component,你可以封裝成方法,看著就會簡潔一點,我這里就不做了
記得要用concat方法連接,固定的路由和動態(tài)新加的路由,這樣瀏覽器回退的時候也能正常返回
//點擊跳轉點擊新增 動態(tài)路由: "secondRouter"//跳轉過去的component組件,xxx.vue
新增動態(tài)路由 恭喜你,動態(tài)添加路由成功,瀏覽器的鏈接已經(jīng)變化;無論你怎么刷新我都會留在當前頁面
并且點擊瀏覽器回退鍵,我會跳到之前頁面,不會循環(huán)
2.路由攔截beforeEach
這里攔截的時候,就判斷l(xiāng)ocalStorage里邊有沒有保存新的動態(tài)路由,如果有,就進行判斷,邏輯處理,處理完之后就把保存的路由清除掉,防止進入死循環(huán)。
進入第一層判斷后,需要再次判斷一下是不是頁面的刷新事件
import router from './router' import { constantRouterMap } from '@/router' //router里的固定路由 router.beforeEach((to, from, next) => { if (localStorage.getItem('new')) { var c = JSON.parse(localStorage.getItem('new')), lastUrl=getLastUrl(window.location.href,'/'); if (c.path==lastUrl) { //動態(tài)路由頁面的刷新事件 let newRoutes = constantRouterMap.concat([{ path: c.path, component: resolve => require(["@/components/" + c.component + ""], resolve) }]) localStorage.removeItem('new') router.addRoutes(newRoutes) router.replace(c.path) //replace,保證瀏覽器回退的時候能直接返回到上個頁面,不會疊加 } } next() }) var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到瀏覽器出現(xiàn)網(wǎng)址的最后"/"出現(xiàn)的后邊的字符
ps:一開始我還以為匹配不到路由跳轉404要在攔截這里處理,后來發(fā)現(xiàn)根本不用,直接在注冊路由的時候加上下邊兩段就行了:
export const constantRouterMap = [{ path: '/', component: HelloWorld }, {//404 path: '/404', component: ErrPage }, { //重定向到404 path: '*', redirect: '/404' } ]
看完上述內(nèi)容,你們掌握vue中使用addRoutes動態(tài)添加路由后刷新失效如何解決的方法了嗎?如果還想學到更多技能或想了解更多相關內(nèi)容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!