2016-10-21 3 views
0

이 Vue.js 라우팅 예제 애플리케이션을 이미 사용하고 있습니다. src/main.js 에서 Vue.js 뒤로 버튼으로 라우팅

https://github.com/chrisvfritz/vue-2.0-simple-routing-example 

나는 너무 많은 데이터 값을 가지고있다. currentRoute보다 어플리케이션 시작 "/" 그 좋아요로드의 첫 번째 페이지와 같을 때
const app = new Vue({ 
    el: '#app', 
    data: { 
    currentRoute: window.location.pathname, 
    token : "", 
    errorMessage : '', etc...etc.. 
    }, 

지금 socket.io로 난 "sdawdda2d2ada2ad22ad"

에 토큰을 설정.

'/': 'Home', 
'/about': 'About' 

내가/약 (URL : localhost:8080/about)을 확인 할 src/routes.js 앱을 다시 생성하기 때문에 좋은 그 작품보다,하지만 토큰 및 ERRORMESSAGE 다시 비어 있습니다.

내가 사용할 수있는 토큰 값을 잃지 않고 페이지를 변경하려면 :

this.currentRoute = "/about"  (url: localhost:8080) 

그것의 좋은 작동하지만, URL이 변경되지, 그래서 난 브라우저에서 버튼을 다시 사용하지 못할

. 브라우저가 이동할 때 토큰 값을 잃고 싶지 않으면 내 Vue 앱을 어떻게 분리 할 수 ​​있습니까?

감사합니다.

+1

그 예를 사용하지 않는 이상 앞으로 this.$router.go(1) 이동하기 위해 할 수있는 https://router.vuejs.org/en/ – Jeff

답변

1

Home 경로에서 About 경로로 이동할 때 <router-link>을 사용해야합니다. 올바르게 설정 경로와 일반 HTML 앵커 태그 <a>를 생성

<router-link to="/about">Go to my About Page</router-link> 

을 다음과 같이 당신의 home 페이지에서

, 당신은 about 페이지로 이동할 수 있습니다. 클릭하면 about 구성 요소로 이동하고 서버에서 전체 HTML 웹 페이지 (응용 프로그램 스크립트 사용)를 새로 고치지 않습니다.

경로 구성 요소 만 변경되면 Vue 인스턴스의 토큰과 같은 다른 모든 Vue 매개 변수가 그대로 유지됩니다.

것은 여기 vue-router에서 봐 주시기 바랍니다 : <router-view></router-view>는 다음과 같이 http://router.vuejs.org/en/essentials/getting-started.html

은 당신의 주요 응용 프로그램의 경로에 대한 자리 표시를해야합니다. 경로를 변경하면 HomeAbout 구성 요소가이 router-view에 렌더링됩니다.

+0

고마워, 너무 많이, 나는 이것을 시도 할 것이다. 하지만 프런트 엔드 기술이 좋지 않기 때문에 나에게 힘들다. 그러나 나는 그것을 시험해 본다 :) – ketom

2

당신이 this.$router.go(-1) 또는 vm.$router.go(-1) 같은 공식 뷰 라우터 라이브러리를 사용 ... click here

관련 문제