addRoutes가 동적으로 경로를 추가한 후 vue는 새로 고침 실패 문제를 어떻게 해결합니까?

이 글에서는 addRoutes가 동적으로 경로를 추가한 후 vue가 새로 고침 실패 문제를 해결하는 방법을 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

#🎜🎜 # 서문

일부 시나리오에서는 addRoutes를 사용하여 경로를 동적으로 추가해야 하지만 새로 고침 후에는 유효하지 않게 됩니다. 얼마 전 프로젝트에서 이 애플리케이션 시나리오를 접했기 때문에 다음을 사용했습니다. 그것을 연구하고 공유할 시간입니다. 제가 기록에 대해 틀렸다면 정정해 주십시오.

응용 시나리오: 사용자가 시스템에 로그인하면 페이지에 버튼이 있습니다. 클릭하면 경로가 동적으로 추가되고 점프됩니다 #🎜🎜 #. 점프한 후에도 사용자는 새로 고침 후에도 현재 페이지에 유지됩니다. 이 버튼을 클릭하지 않고 브라우저에 주소를 입력하면 사용자는 404 페이지로 이동합니다

github:

https://github.com/ Mrblackant... 온라인 보기:
http://an888.net/router/keepR...
생각

1. 사용자가 버튼을 클릭하고 addRutes를 사용하여 경로를 동적으로 추가하고 경로를 저장합니다.

2 사용자는 beforeEach를 사용하여 새로 점프한 페이지를 가로채서 판단합니다. 새로고침 경로가 이전에 저장되어 있는 것으로 확인되면 새 페이지가 새로 고침 이벤트일 뿐이라고 판단한 다음 이전에 저장한 경로를 추가합니다. #

(1). 로그인 페이지, 404 등과 같은 일부 고정 경로가 포함된 router/index.js에서

//router/index.js
export const constantRouterMap=[
    {
      path: '/',
      // name: 'HelloWorld',
      component: HelloWorld
    }
  ]
Vue.use(Router)
export default new Router({
  routes: constantRouterMap
})

( 2) 버튼을 클릭하여 경로를 저장하세요.

경로를 저장하는 단계는 점프할 구성 요소에서 수행되어야 합니다. 이는 beforeEach 차단 측의 교착 상태를 방지하기 위한 것입니다.

하나는 경로이고 다른 하나는 컴포넌트입니다. 여기서는 더 간단하게 만들 수 있습니다.concat 메소드 연결, 고정 라우팅 및 동적으로 추가된 라우팅을 사용하는 것을 기억하세요. , 롤백 시 브라우저가 정상적으로 복귀할 수 있도록

//点击跳转
<template>
  <p>
    点击新增 动态路由: "secondRouter"
    <br>
    <el-button>新增动态路由</el-button>

  </p>
</template>

<script>
import router from &#39;vue-router&#39;
import {constantRouterMap} from &#39;@/router&#39;


export default {
  name: &#39;kk&#39;,
  mounted(){
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
    srouter(){
      let newRoutes=constantRouterMap.concat([{path:&#39;/secondRouter&#39;,
        component :resolve => require(["@/components/kk"], resolve )
      }])
      this.$router.addRoutes(newRoutes)
      this.$router.push({path:&#39;/secondRouter&#39;})
    }
  }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
  <p>
    恭喜你，动态添加路由成功，浏览器的链接已经变化；

    </p>
<h3>无论你怎么刷新我都会留在当前页面</h3>
    <h3>并且点击浏览器回退键，我会跳到之前页面,不会循环</h3>

  
</template>

<script>
import router2 from &#39;@/router&#39;
import router from &#39;vue-router&#39;
export default {
  name: &#39;HelloWorld&#39;,
  mounted(){
      localStorage.setItem(&#39;new&#39;,JSON.stringify({&#39;path&#39;:&#39;/secondRouter&#39;,&#39;component&#39;:&#39;kk&#39;}))//保存路由
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
  }
}
</script>

2. Route 가로채기 beforeEach

여기서 가로채면 판단됩니다. localStorage에 새로운 동적 경로가 저장되어 있는지 여부를 판단하고 논리적으로 처리한 후 저장된 경로를 지워 무한 루프에 빠지지 않도록 합니다. 1단계 판단에 들어간 후 페이지 새로고침 이벤트인지 다시 판단해야 합니다

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) { //动态路由页面的刷新事件
      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))//取到浏览器出现网址的最后"/"出现的后边的字符

ps:

처음에는 라우팅이 hop이 일치하지 않습니다. 차단 시 여기에서 404 전송을 처리해야 하지만 나중에 전혀 필요하지 않다는 것을 확인했습니다. 경로를 등록할 때 다음 두 단락을 추가하면 됩니다.

export const constantRouterMap = [{
    path: '/',
    component: HelloWorld
  }, 
  {//404
    path: '/404',
    component: ErrPage
  },
  { //重定向到404
      path: '*', redirect: '/404' }
]

The 전체적인 아이디어는 아마도 이렇습니다. 주로 beforeEach 가로채기+를 사용하여 localStorage에 데이터 저장을 완료할 수 있으며 addRoutes는 무효화 없이 경로 새로 고침 기능을 동적으로 추가합니다.

부족한 점이 있으면 지적해주세요

위 내용은 모두의 학습에 도움이 되기를 바라는 내용입니다. PHP 중국어 웹사이트!

관련 권장 사항:

vue 라우터: 동적 경로 일치동적 경로 일치

Homemade vue 구성 요소 통신 플러그인은 mixin을 사용하여 플러그인을 작성합니다

위 내용은 addRoutes가 동적으로 경로를 추가한 후 vue는 새로 고침 실패 문제를 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!