Vue <router-view/>에 빨간줄 해결 법

빨간줄이 거슬려서 해결방법을 찾아봤다.

A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths.

 

 

Eslint 관련해서 잡히는 거라고 한다.

Vue 2.0에서는 루트 태그가 있어야 에러가 아니었다고 하는데

Vue 3.0에서는 없어도 돼서 사실 에러가 아니다

근데 Eslint는 아직 바뀐 내용을 모두 적용하지 않고 있어서 빨간줄이 가는 거라고 한다.

해결

<template>
<nav>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>

위의 코드를 루트태그로 감싸준다.

아래처럼

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

성공!

 

펻펻