vue.js__Vue Router

🌱 라우터 (router)

• 대체로 경로는 router > index.vue파일에 몰아놓고,
  각 페이지마다 필요한 router-link to='' 넣어 필요한 버튼 만들고
  어짜피 화면 변환은 페이지 하나에서 router-view해주면 됨.

 <router-link to='url값'> 클릭 </router> 
 - 페이지 이동 태그, 화면에서는 <a>태그로 표시 됨. 클릭 시 해당 url로 이동됨.
 <router-view/>  --- 페이지 표시 태그. url값에 따라 router된 컴포넌트 보여줌.
 !! 반드시 <router-link>와 <router-view>를 같이 써줘야 한다.

작성예시) 
...
<div id='test'>
   <h1>라우터 예제</h1>
   <br/>
   <!-- 클릭 시 url값을 변경하는 태그 -->
   <router-link to='/main'> main으로 이동 </router-link>
   <router-link to='/login'> login으로 이동 </router-link>
   <br/>
   <!-- url값에 따라 갱신되는 화면 영역 -->
   <router-view/>
<div>

<script>
    // main, login 컴포넌트 정의 
    const Main = { template: '<div> main </div>'};
    const Login = { template: '<div> login </div>'};

    // 각 url에 맞춰 표시할 컴포넌트 지정
    const aaa = [
    	{  path: '/main',    // 👉 path, component = 필수요소임!!!!!!
           componenet: Main,
           name: 'Main'      // 👉 name = 필수요소는 아니지만 있으면 
        },    	     	     //          name으로도 router부르기 가능함.
        { path: '/login',
          componenet: Login,
          name: 'Login'
        },
    ]
    
    // 뷰 라우터 정의 
    const router = new VueRouter({
    	aaa.   //위에서 선언해준 aaa
    })
    
    // 뷰 인스턴스에 라우터 추가
    const bbb = new Vue({
    	router
    }).$mount('#test');
    		//$mount()  = el속성과 같이 인스턴스를 화면에 붙이는 역할을 함. 
         	//          = 인스턴스를 생성할 때 el속성을 넣지 않았더라도,			
      		//          = 생성 후에 $mount()를 이용하며녀 강제로 붙일 수있음.
           		    = vue router의 공식 문서가 다 이렇게 되어있음. 
</script>

---

🌱 네스티드 라우터 (Nested Router)

: router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

• 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식.
  ( vue공식 홈페이지 docs에도 없고, 거의 쓸 일 없다고 함. )

네스티드 라우터 작성방법)
<temlate>
    <div id = 'test'>
    	<router-view> user 컴포넌트가 뿌려질 영역 </router-view>	
    </div>
</template>
<script>
    const User = { //컴포넌트 내용 정의 
    	template: `
            <div>
            	User Component
                <router-view>하위 컴포넌트가 뿌려질 영역</router-view>
            </div>
        `
    }
    const routes = [
    	path:'/user',
        component: User,
        children:[     // 네스티드 라우팅 정의 부분
           {
             path: 'posts',
             component: UserPost
           },
           {
             path:'profile',
             component: UserProfile
           }
        ]
    ]
    
    const router = new VueRouter({
    	routes
    })
    
    const app = new Vue({
    	router
    })i.$mount('#test')
 </script>

---

🌱 네임드 뷰 (Named View)

: 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식.

• 같은 레벨에서 여러개의 컴포넌트를 한 번에 보여줌.
  

네임드 뷰 사용 방법)
   <div id='test'> 
   	<!-- 라우팅영역 정의 -->
   	<router-view name='aaa'></router-view>
    	<router-view></router-view> <!--name없으면 디폴트-->
        <router-view name='ccc'></router-view>
   </div>
   
   <script>
   	// 컴포넌트 내용 정의
    	const Body = {template: '<div>This is Body</div>'};
    	const Header = {template: '<div>This is Header</div>'};
    	const Footer = {template: '<div>This is Footer</div>'};
        
        const router = new VueRouter({
              routes: [
              	 path: '/',
                 components: { //-- router-view의 name속성과 컴포넌트 연결
                 	default: Body,
                    	aaa: Header,
                        ccc: Footer
                 }
              ]
        })
   </script>