Router

今回はVue Router
1つのサイトに複数のページがあります.
ほとんどはaリンクを使用して機能を実現します.
Vueが提供するRouterは、これらのページを移動する機能を提供します.
ルータを使用するには、cdnまたはnodeを使用してパッケージをインストールする必要があります.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//or

npm install vue-router

RouterもVueと同じVueRouterオブジェクトを作成する必要があります.

new VueRouter({
   ...내용
});

コンテンツセクションでは、ルーティング:[]でページのルーティング情報を宣言し、[]配列には各ページの情報オブジェクトが含まれます.
ex

let router = new VueRouter({
    // 페이지의 라우팅 정보
    routes: [
         {
            // 페이지의 url
            path: '/login',
            // 해당 url에서 표시될 컴포넌트
            component: LoginComponent
         },
         {
            path:'/main',
            component: MainComponent
         },
    ]
});

生成されたルータは、Vueオブジェクトを生成するときにrouterというキー値をバインドするだけでよい.

new Vue({
    el: '#app',
    router: router
});

urlに/loginと入力した場合、LoginComponent、
入力/mainはMain Componentに入ります.
ただし,特定の場合を除きurlを入力してサーフィンを行うことはない.
Loginボタンを押すときはLogin Component、Mainボタンを押すときはMain Componentを使います.

    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <router-view />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            name: "Login",
            template: "<div>login</div>"
        }

        var MainComponent = {
            name: "Main",
            template: "<div>main</div>"
        }

        var router = new VueRouter({
            routes: [
                {
                    path: '/login',
                    component: LoginComponent
                },
                {
                    path:'/main',
                    component: MainComponent
                },
            ]
        });

        new Vue({
            el: '#app',
            router: router
        });
    </script>

router-linkラベルはページリンクを生成し、リンクラベル内のto="を使用します.
一致urlを記入すればいいです.
routerを使う方法は2つあります.

宣言ナビゲーション

プログラミングナビゲーション

router-linkタグは宣言的な方法です.
プログラミング方式はスクリプトを作成するために使用されます.

// url만 필요한 경우
router.push({ path: "/login" });

// name을 지정하고 param이 필요한 경우 ({path: '/user/:userId'})
router.push({ name: 'user', params: { userId: 123 }});

// url의 쿼리 부분에 값을 추가하고 싶을 경우 (/register?plan=private)
router.push({ path: 'register', query: { plan: 'private' }});

//히스토리 항목을 추가하지 않고 탐색
router.replace({ path: "/login" });

//window.history.go(n)와 비슷하게 히스토리 스택에서 앞으로 또는 뒤로 이동하는 단계를 나타내는 하나의 정수를 매개 변수로 사용
router.go(-1);

ソース:インフラストラクチャVue。js-Vueエージェントを起動します。js