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
01)라라벨에 뷰 라우터 설치하기  (0) 2020.01.13
laravel+vue+tailwindcss  (0) 2019.08.24
laravel vue axjos  (0) 2019.08.05
라라벨 뷰 적용하기  (0) 2019.08.03

+ Recent posts