vue-router 빌드 시 라우팅 페이지가 표시되지 않는 문제를 해결하는 방법

이번에는 vue-router 빌드 시 라우팅 페이지가 표시되지 않는 경우 처리하는 방법을 알려드리겠습니다. 빌드 시 라우팅 페이지가 표시되지 않는 vue-router 처리 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

vue cli를 사용하여 웹팩 프로젝트를 생성합니다

vue-router를 추가하고 라우팅을 사용하여 새 구성 요소를 도입합니다. 이때 라우팅과 링크는 다음과 같이 작성됩니다

const router = new VueRouter({
 mode: 'history',
 base: dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1. npm run dev는 문제가 없는지 확인합니다

2. npm run build Packaging

3. 서비스를 시작합니다(예:

python

-m). SimpleHTTPServer) index.html 페이지를 확인하면 검색된 경로가 /first 페이지를 요청합니다. 4. 해결 방법: 라우팅 구성의 기록을 해시로 변경하고 링크의 /first를 /#/first로 변경합니다. 문제가 해결되었습니다.

============2017.8.24 업데이트================= 더 많은 정보를 검색해 본 결과 , 실제로 라우터 모드에서 기록을 사용할 수 있습니다. 문제는 점프를 하던 중에 발생했습니다. window.location.href=""를 사용하는 것을 당연하게 여겼지만 실제로는 router.push를 사용해야 합니다. 코드의 handlerSelect는 요소 ui에 나타나는 메시지 처리 방법을 사용하기 때문입니다. 버튼의 키가 2이면 첫 번째로 점프하고, 키가 3이면 두 번째로 점프하는 방식으로 이 메서드가 실행되는 것으로 이해할 수 있습니다.

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$router.push('first');
  } else if (key == 3){
   this.$router.push('second');
  }
  }
 }
 }
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue의 라우팅 권한 관리

vue2.0 라우팅에 router-view가 표시되지 않는 문제 해결

위 내용은 vue-router 빌드 시 라우팅 페이지가 표시되지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!