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 package

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(&#39;first&#39;);
  } else if (key == 3){
   this.$router.push(&#39;second&#39;);
  }
  }
 }
 }
</script>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript Starry Navigation Bar 구현 방법

vue.js의 계산, 필터링, 가져오기, 설정 사용법 및 차이점 자세한 설명

도메인 구입부터 pm2 배포 사용까지 자세한 설명 node.js 프로젝트의 전체 과정

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