認証が必要な URL にアクセスした時に、まだログインしていない場合にはログインボタンを表示します。 作成にあたって以下の知識が必要になるので、順に試していきます。 コンポーネント vue-router ルートメタフィールド、ナビゲーションガード Playground として http://codepen.io を使用します。できあがったコードは http://codepen.io/takatama/pen/zoNeWP です。 Vue.js 2.0.7 と vue-router 2.0.2 で動作を確認しました。 なお、Vue.jsについて体系的に学ぶには「Vue.js入門」が超絶オススメです。ログイン、ログアウトについても丁寧に解説されています。 コンポーネント ドキュメントは https://vuejs.org/v2/guide/components.html です。 User コン
![Vue.js 2.0 でログイン (vue-router で認証が必要な URL を定義) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c8a642359e8745e6fef48703791741fb7b1b1de8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9VnVlLmpzJTIwMi4wJTIwJUUzJTgxJUE3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJUE0JUUzJTgzJUIzJTIwJTI4dnVlLXJvdXRlciUyMCVFMyU4MSVBNyVFOCVBQSU4RCVFOCVBOCVCQyVFMyU4MSU4QyVFNSVCRiU4NSVFOCVBNiU4MSVFMyU4MSVBQSUyMFVSTCUyMCVFMyU4MiU5MiVFNSVBRSU5QSVFNyVCRSVBOSUyOSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y4ZGU3Y2I2YTZkNWIzYjYxMGU5ODM1NDlhY2RjZjc%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFrYXRhbWEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE2MWRiNjY5NDhlYTc0Njc5YjZkZTA5OTRlOGE1ZDQ0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D17b09d39a7907a881f90686fa309dc8e)