[Vue] 3. 페이지이동 및 변수사용

 

[Vue] 2-2. 프로젝트 생성 (Manually select features)

 

1. 페이지 생성

앞선 포스팅에서 생성한 프로젝트의 Views 폴더안에 vue 파일을 생성한뒤 template 태그 안에 Html 내용을 작성한다.

 

views/index.vue

 

위처럼 생성한 Index.vue 파일을 Router 에 등록 해줘야 페이지 라우팅이 가능하므로 router/index.js 파일에 

아래와 같이 추가해준다.

router/index.js

routes 에경로를 추가하는 방식은 2가지로 

about 에 등록한 방식처럼 화살표 함수 (Arrow Function)을 사용하여 바로 import 해주는 방식과 

Home 이나 Index 처럼 Import를 한뒤에 추가해주는 방식이있다.

Router 를 등록했으면 App.Vue 페이지에 해당 페이지의 링크를 달아주면 된다.

 

App.Vue

<router-link to="/index">Index</router-link>

 

해당 구문을 입력하고 페이지를 실행시키면 <a> 태그 형식의 링크가 나타나며 해당 링크 클릭시 Index.vue 파일이

<router-view/> 에 로드 된다.

 

결과:

 

 

2. 변수사용

스크립트에서는 다른 모듈을 import 할수있고 script 내에서 export를 통해 컴포넌트를 조정하거나 컴포넌트에 필요한 데이터를 제공하기도한다.

<script>
export default ({
  ...
})
</script>

 

페이지에서 변수를 사용할때는 아래와같이 data property 를 사용하면된다.

<template>
    <div class="index">
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
export default ({
    data(){
        return{
            msg:"Vue Study",
        }
    },
})
</script>