真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue中使用addRoutes動態(tài)添加路由后刷新失效如何解決

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)新加的路由,這樣瀏覽器回退的時候也能正常返回

//點擊跳轉




//跳轉過去的component組件,xxx.vue


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è)資訊頻道,感謝各位的閱讀!


分享名稱:vue中使用addRoutes動態(tài)添加路由后刷新失效如何解決
網(wǎng)站網(wǎng)址:http://weahome.cn/article/pdjgjs.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部