vue에서 이전 페이지로 이동하는 방법

이 글에서는 로그인 후 이전 페이지로 이동하기 위해 Vue가 구현하는 기능을 공유합니다. 이러한 편의가 필요한 친구들은 이 기능을 통해 배울 수 있습니다.

개발 중에 사용자가 페이지에 들어가려면 링크를 직접 클릭해야 하는 경우가 종종 있습니다. 사용자가 링크를 클릭하면 로그인 인터페이스로 돌아가게 됩니다. 홈페이지가 아닌 링크된 페이지로 이동하게 됩니다. 이 문제를 해결하려면 어떻게 해야 합니까?

먼저 사용해야 하는 몇 가지 API에 대해 이야기하겠습니다.

1.router.currentRoute: 현재 라우팅 정보 객체로, 쿼리 매개변수 및 해시의 전체 경로를 포함하여 router.currentRoute.fullPath를 통해 구문 분석된 URL을 얻을 수 있습니다. , 접속하려는 페이지의 경로에 이름이 있으면 router.currentRoute.name을 통해 현재 경로의 이름을 얻을 수 있습니다.

2.router.replace: 기능은 router.push와 동일하지만, 기록에 새로운 기록을 추가하지 않고, 현재 기록 기록을 대체합니다.

모든 사람의 코드가 다르게 작성되므로 구체적인 구현 코드는 포함하지 않지만 아이디어를 간략하게 소개하겠습니다.

1. 사용자가 링크를 클릭하면 대상의 라우팅 페이지로 이동한 다음, 401 차단을 실행하고 로그인 페이지로 돌아갑니다:

//401拦截
if（status == "401"）{
  router.push("/login")   
}

2. 401 차단 시 URL에 대상 링크를 저장할 수 있습니다:

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由，并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3. 로그인을 클릭한 후 URL에 저장된 쿼리를 사용하여 바로 돌아갈 수 있습니다. 위의 대상 페이지

router.push({path:decodeURIComponent(url)});

를 모두를 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vuex의 중국어 문서에 대한 자세한 소개

순수한 js로 드롭다운 목록을 생성하는 방법

vue에서 파일을 사용하는 방법에 대해

jquery를 소개하는 방법 vue-cli webpack(세부 튜토리얼)

위 내용은 vue에서 이전 페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!