시원하게 설명 된 곳이 없어서 삽질하다 직접 쓴다.
다른 글들을 참고하여, 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'); 의 방법으로 이동하는 것도 가능하다.
'내가 자꾸 까먹어서 쓰는 개발 이야기 > Vue.js' 카테고리의 다른 글
| Vue 3 Composition API: route 가드 설정 전 인증 체크하기 (0) | 2024.04.26 |
|---|---|
| [vue sfc] IE용 빌드 세팅 (0) | 2020.06.29 |
| 템플릿 디렉티브 믹스 (0) | 2019.04.24 |
| [webpack 4] vendor와 common 합체 (0) | 2019.03.14 |
| [webpack] blueimp-fileupload jquery plugin 사용하기 (0) | 2018.07.31 |
최근댓글