관리 메뉴

FILife

Vue.js SPA (Single Page Application) 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Vue.js SPA (Single Page Application)

FIL 2020. 6. 1. 14:20

시원하게 설명 된 곳이 없어서 삽질하다 직접 쓴다.

 

다른 글들을 참고하여, Laravel과 webpack과 vue를 설치한다.

 

[Laravel]

 

resources/views/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>My App</title>
	
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
	<link rel="stylesheet" href="{{ asset('css/app.css') }}">

</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Laravel에서 view 가 있는 route는 얘가 다 한다고 보면 된다.

 

/routes/web.php

<?php

Route::any('/{any?}/{all?}', function () {
	return view('app');
})->name("main");

위와 같이 작성하면 모든 route가 resources/views/app.blade.php 를 표시하게 된다.

 

이후 xhr(Restful 등)에 사용할 route들은 Route::any() 의 윗로 추가 해 준다.

 

 

[Vue]

 

/resources/js/app.js

window.$ = window.jQuery = require("jquery");

import Vue from "vue";
import routes from "./routes";
import App from "./layouts/layout";

Vue.use(VueRouter);

const router = new VueRouter({routes, mode: "history"});

const app = new Vue({
	el: '#app',
	render: h => h(App),
	router: router,
});

SPA에 공용 layout을 적용할거라서 layout.vue 파일을 렌더 하게 했다.

 

VueRouter의 mode가 "history"로 되어 있어야 새로고침 시 404가 뜨지 않는다.

 

다만 뒤로가기 등 해결해야 할 부분이 조금 더 생긴다.

 

route를 따로 import 하므로 route 파일을 작성 해 준다.

 

/resources/js/routes.js

import Module1 from "./components/module1";
import Module2 from "./components/module2";
import Module3 from "./components/module3";

const routes = [
	{path: "/", component: Module1},
	{path: "/list", component: Module2},
	{path: "/new", component: Module3, name: "module3"},	
];

export default routes;

대략 이런 식이다.

 

 

다음으로 layout을 만들어 넣는다.

 

/resources/js/layouts/layouts.vue

<template>
	<div class="container-fluid stage">
		<div class="row table-primary fixed-top">
			<div class="col-12 text-center py-2">
				<h4>
					My Vue SPA
				</h4>
			</div>			
		</div>

		<div class="row">
			<div class="col-md-12 col-lg-8 container py-3 content">
				<router-view></router-view>				
			</div>
        </div>
	</div>
</template>

<script>
	export default {
		data: function () {
			return {};
		},
		methods: {},
		mounted() {

		}
	}
</script>

<style lang="scss">
	[v-cloak] {
		display: none;
	}

	.stage {
		min-height: 100vh;

		.content {
			margin-top: 52px;
			min-height: calc(100vh - 92px);
		}		
	}


	.clickable {
		cursor: pointer;
	}

	.not-allowed {
		cursor: not-allowed;
	}
</style>

 

위와 같이 작성하여 기본 틀로 쓰면 된다.

 

쓰다 보니 왜 시원하게 설명 된 곳이 없는지 알것같다.

 

<route-link to="/page"></route-link> 를 사용하여 링크를 생성하면,

 

<route-view/> 부분에 링크 된 component가 로드된다.

 

또는 this.$router.push('/page'); 의 방법으로 이동하는 것도 가능하다.

 

 

 

 

 

0 Comments
댓글쓰기 폼