vue-router 사용법

3229 단어 vue-routerVue.js

소개



laravel과 vue-router가 들어있는 전제로서의 기사가 됩니다.
vue-router를 설치하지 않은 분이 있다면
이 기사를 참조하십시오.
htps : // 이 m/카렌/있어 ms/48334437에 b06628b78fc

이번에는 실제로 vue-router로 지정한 URL에 vue 파일로 기술한 내용을 화면에 표시할 수 있도록 하는 방법이 됩니다.

이번에 사용할 파일 구성


projectName
　↳resorces
　　↳js
　　　↳components
　　　　↳index.vue
　　　　↳detail.vue
　　↳views
　　　↳index.blade.php

router.js의 내용


import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import index from './components/index.vue';
import detail from './components/detail.vue';

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: index
            component: index
        },
        {
            path: '/detail',
            name: detail,
            component: detail
        }
    ]
});

vue-router의 내용이 이렇게 되어 있다고 전제가 됩니다.

index.blade.php



index.blade.php
<!doctype html>
<head>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
       <router-view />
    </div>
</body>
</html>

head의 내용에 반드시 컴파일한 js를 사용해 주세요.
id를 app.js로 지정한 내용을 기술하고 router-viewrouter.js 의 내용을 보게 됩니다.
여기까지가 blade에 기술하는 내용이 됩니다.

vue 내의 설명



그럼 실제로 여기에서 vue-router를 사용한 vue.js의 내용입니다.

index.vue
<template>
    <div>
        index.vueの中身になります。
        <router-link to="/detail">detail.vueに遷移</router-link>
    </div>
</template>

URL에 /를 입력하면 router.js에 지정된 index.vue의 내용이 표시됩니다.
이 경우 화면에 다음과 같이 표시됩니다.

detail.vueに遷移 를 누르면 detail.vue 의 내용이 표시됩니다.

detail.vue
<template>
    <div>
        detail.vueに遷移しました。
    </div>
</template>

실제 화면에서는 이렇게 됩니다.


이제 vue-router를 사용한 화면 전환이 발생합니다.
Vue.js 구성 요소 설계 참조
vue-router의 제목 메타 태그를 반영하는 mixins

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage