이전 작업 구성 요소로 돌아 가면 흰 페이지가 나타납니다.

Question

요즘은 VueJs으로 첫 걸음을 내딛었으며 vue-router이 있고 일부 구성 요소는 vue-cli을 사용하여 올바른 비계를 얻었습니다.

<template> 
    <section class="hero is-small is-info"> 
    <div class="hero-head"> 
     <nav class="navbar"> 
     <div class="navbar-brand"> 
      <span class="title is-3" style="margin: 10px 0 0 32px">Title</span> 
     </div> 
     <div class="navbar-menu"> 
      <div class="navbar-end"> 
      <router-link to="welcome" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-home"></i></span> 
      </router-link> 
      <router-link to="newmails" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-envelope-open"></i></span> 
      </router-link> 
      <router-link to="settings" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-cogs"></i></span> 
      </router-link> 
      <router-link to="bugreport" class="navbar-item" active-class="is-active"> 
       <span class="icon is-small"><i class="fa fa-bug"></i></span> 
      </router-link> 
      </div> 
     </div> 
     </nav> 
    </div> 
    </section> 
</template> 

<script> 
export default { 

}; 
</script> 

당신이 볼 수 있듯이, 서로 다른보기 사이 탐색을 통해 이루어집니다 다음과 같이

import Vue from 'vue'; 
import Router from 'vue-router'; 

import Welcome from '@/components/Welcome'; 
import NewMails from '@/components/NewMails'; 
import Settings from '@/components/Settings'; 
import Bugreport from '@/components/Bugreport'; 


Vue.use(Router); 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'welcome', 
     component: Welcome, 
    }, 
    { 
     path: '/newmails', 
     name: 'newmails', 
     component: NewMails, 
    }, 
    { 
     path: '/settings', 
     name: 'settings', 
     component: Settings, 
    }, 
    { 
     path: '/bugreport', 
     name: 'bugreport', 
     component: Bugreport, 
    }, 
    ], 
}); 

내가 내비게이션 구성 요소를 내장 다음과 같이

나는 라우터의 정의 (./router/index.js)를 확장 라우터는 router-link element을 사용합니다.

응용 프로그램이로드되면 / 경로가 활성화되고 Welcome 구성 요소가 원하는대로 DOM에 주입됩니다. newmails 사이의 전환 외에도 settings 및 bugreport보기 resp. 구성 요소가 꽤 잘 작동합니다.

그러나 경로의 welcome 경로를 다시 열려고하면 원하는 구성 요소가 제대로 주입되지 않습니다. 동일한 구성 요소를 처음 본 모습에서 볼 수 있었던 내용 대신, 흰색/빈 페이지 만 표시됩니다. 응용 프로그램의 DOM을 검사

는

<div id="app"><!----></div> 

내가 언급 한 빈 페이지에 이르는 얻을 모든 인 구성 요소의 내용 대신, 주입하지 않는 것을 알 수있다.

개발 모드에서 실행 중이지만 VueJs는 브라우저 콘솔에 오류 메시지를 기록하지 않으므로이 시점에서 디버깅을 조금 더 어렵게 만듭니다. Vue에서 유효하지 않은 HTML을 렌더링 할 때 빈 페이지가 표시된다는 유사한 문제가 발생합니다. 그래서 결함이있는 구성 요소를 다른 구성 요소와 비교하여 큰 차이점을 찾을 수 없었습니다. 또한 구성 요소 자체를 예 : 경로의 정의를 채택하면 다음과 같습니다.

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'welcome', 
     component: Settings, 
    }, 
    { 
     path: '/newmails', 
     name: 'newmails', 
     component: NewMails, 
    }, 
    { 
     path: '/settings', 
     name: 'settings', 
     component: Settings, 
    }, 
    { 
     path: '/bugreport', 
     name: 'bugreport', 
     component: Bugreport, 
    }, 
    ], 
}); 

문자 그대로 동일한 효과가 발생합니다. 구성 요소는 처음 방문시 올바르게 렌더링되고 삽입되며 다른 경로 /보기/구성 요소에서 돌아올 때 오류가 <!---->이됩니다.

다른 모든 경로가 원하는대로 작동하기 때문에 내가 뭘 잘못하고 있니?

Answer 1

welcome에 대한 경로를 지정하지 않았으며 /에 대해서만 경로를 지정했습니다.

그럼 <router-link to="welcome">은 어떤 작업을해야합니까? 리디렉션 또는 welcome 라우팅 문제를 해결하기 위해 별칭 중 하나 -USE

:

여기에 몇 가지 팁입니다. https://router.vuejs.org/en/essentials/redirect-and-alias.html.

별칭을 권장합니다.

사용자가 방문하는 것처럼 사용자가 방문/b는, URL이/A /B 남아 있지만이 일치 될 때와 같은/b는 의미 /의 별명입니다.당신이 /welcome/home/dad 같은 중첩 된 경로에있어, 경우 <router-links>

<router-link to="/newmails"> 

이유의 존재에 대신 상대 경로의

{ 
    path: '/', 
    name: 'welcome', 
    component: Settings, 
    alias: '/welcome' 
} 

-USE 절대 경로, 당신은 <router-link to="newmails">을 클릭, 그것은 것입니다 /welcome/home/newmails 노선 /newmails

대신 vue-router를 사용하고 있는데 <div id="app"><!----></div>이 표시되면 가장 유망한 경로입니다.

Answer 2

실제로 명명 된 경로를 사용할 수 있지만 구문은 다릅니다 (to 앞에 콜론을 적어 둡니다).

<router-link :to="{ name: 'welcome'}">Welcome</router-link> 

참조 : Vue Named Routes