Vue 라우터는 Vue.js의 공식 라우터입니다.
Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다.
1. 라라벨 설치하기
composer create-project laravel/laravel assets --prefer-dist 5.8
2. cd assets
npm install 설치하기 node js가 설치 되어 있어야함
3. vue-Router설치
1 | npm install vue-router | cs |
4. resources/js/app.js 소스작성
1 | 모듈 시스템에서 사용하면 Vue.use()를 통해 명시적으로 라우터를 추가해야합니다. | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import Vue from 'vue'; import VueRouter from 'vue-router'; import routes from './routes'; Vue.use(VueRouter); let app = new Vue({ el: '#app', router: new VueRouter(routes) }); | cs |
5. resources/js/routes.js 파일생성 소스작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | export default{ mode : 'history', routes:[ { path: '/', component: Home }, { path: '/about', component: About }, ] }; | cs |
6. components/Home.vue 생성하기
7. components/About.vue 생성하기
8. routes.js 에 컴포넌트 임포트하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import Home from './components/Home'; import About from './components/About'; export default{ mode : 'history', routes:[ { path: '/', component: Home }, { path: '/about', component: About }, ] }; | cs |
9. views/welcome.blade.php 소스작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script src="/js/app.js"></script> </body> </html> | cs |
10. npm run watch
11. 브라우저에서 확인을 해보자
12. assets.test/about 를 입력해보자
404에러가 나온다.
그이유는 라라벨 라우트 설정을 안해줘서 그렇다.
13. routes/web.php 파일을 수정한다.
1 2 3 4 5 6 | <?php Route::get('/{any?}', function () { return view('welcome'); }); | cs |
14. assets.test/about 를 입력해보자 정상적으로 출력이 된다.
15. welcome.blade.php 파일을 다시 수정하자
아래의 링크소스를 추가해보자
1 2 3 | <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> </head> <body> <div id="app"> <router-view></router-view> <hr> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> <script src="/js/app.js"></script> </body> </html> | cs |
16. 다시 브라우저를 새로고침하면 정상적으로 링크가 설정되었다.
'라라벨 > Vue(laravle)' 카테고리의 다른 글
| 404페이지 설정하기 (0) | 2020.01.13 |
|---|---|
| 02) 레이아웃 tailwindcss (0) | 2020.01.13 |
| laravel+vue+tailwindcss (0) | 2019.08.24 |
| laravel vue axjos (0) | 2019.08.05 |
| 라라벨 뷰 적용하기 (0) | 2019.08.03 |