【VueRouter】基本的な使い方

URLとコンポーネントを紐付けルーティングする。

インストール

% yarn add vue-router

ルーターを設定

// router.js
// vue-routerをインポート
import Vue from 'vue'
import Router from 'vue-router'　// 'Router'として使う
 // ルートコンポーネントをすべてインポート
import Home from '...' 
import Users from '...'
 
// プラグインを使う宣言
Vue.use(Router)
 
// Routerをエクスポート
export default new Router({　
    mode: "history",　// URLの最後にデフォルトでついてる#を外す
    routes: [
       {path: '/', component: Home},    // パスとコンポーネントを指定する
       {path: '/users/:id', component: Users}    // 動的なurlを扱いたいときは:を使う
    ]
});

RouterをVueに適用させる

import router from './router.js';
 
new Vue ({
    router: router,
    render: h=>h(App)
}).$mount('#App');

App.vueにrouter-viewを配置

<!-- App.vue -->
<template>
    <div>
        <router-view></router-view>
        <!-- URLによってrouter-viewの内容が動的コンポーネントのように変わる -->
    </div>
</template>

ページを切り替えるリンクをつくる

router-link

router-linkがページ遷移するためのリンクになる。toでパスを遷移先のパスを指定する。

<template>
    <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/users">Users</router-link>

コードからURLを切り替える

this.$router.push('遷移先のリンク')でURLを切り替える。

<template>
    <button @click="toUsers" >
 
methods: {
    toUsers() {
        this.$router.push('/users');
    }
}