■ はじめに
https://dk521123.hatenablog.com/entry/2020/04/30/000000
https://dk521123.hatenablog.com/entry/2020/12/19/000000
https://dk521123.hatenablog.com/entry/2020/12/22/192553
の続き。 Vue Router っていうのがあるらしいので、メモ。
目次
【１】Vue Router とは？ 【２】環境設定 【３】関連するコンポーネント 【４】サンプル 例１：Hellow world 例２：ページ追加（AboutMeを追加）
【１】Vue Router とは？
* 表示するコンポーネントを制御 ⇒ URLのパスを制御して、ページを振り分けるルーティング機能 * シングルページアプリケーションの構築する際に利用
【２】環境設定
１）Node をインストールする
* 以下の関連記事を参照のこと。
https://dk521123.hatenablog.com/entry/2018/06/05/211900
２）コマンドで設定を行う
# インストール npm install vue-router
補足：新しくアプリケーションを作成する場合
* 以下で行えば、インストールされる ⇒ こっちの方が、簡単！！ + 「vue init」コマンドで「? Install vue-router? Yes」 + 「vue create」コマンドで 「? Please pick a preset: (Use arrow keys): Manually select features」 -「? Check the features needed for your project: (*) Router」を選択する ※ 詳細は、以下の関連記事の「２）vue init webpack コマンド」を参照のこと。
https://dk521123.hatenablog.com/entry/2020/12/22/192553
【３】関連するコンポーネント
１）<router-view> ２）<router-link>
１）<router-view>
* ルートとマッチしたコンポーネントを描画する
２）<router-link>
* ルートのリンクを作成する
【４】サンプル
例１：Hellow world
* 長々と書いているが、 上記の「補足：新しくアプリケーションを作成する場合」をした場合 に自動生成されるコード。
./my-app/src/App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
./my-app/src/main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
./my-app/src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
./my-app/src/components/HelloWorld.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> ・・・略・・・ <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
例２：ページ追加（AboutMeを追加）
【修正】./my-app/src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import AboutMe from '@/components/AboutMe' <= ★追加 Vue.use(Router) export default new Router({ routes: [ ↓ ★追加 { path: '/AboutMe', name: 'AboutMe', component: AboutMe }, { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
【新規追加】./my-app/src/components/AboutMe.vue
<template> <div> <h1>About Me</h1> <h2>{{ msg }}</h2> </div> </template> <script> export default { name: 'AboutMe', data () { return { msg: 'This is a message.' } } } </script>
実行
[1] 以下のコマンドでサーバ起動。 ~~~~~~~~~~~~~~~ cd my-app npm run start ~~~~~~~~~~~~~~~ [2] ブラウザで、以下にアクセスする ⇒「About Me」が表示されるはず
http://localhost:8080/#/AboutMe
参考文献
https://b1tblog.com/2019/10/03/vue-router/
https://qiita.com/hshota28/items/765cf903f055754f7557
https://www.hanachiru-blog.com/entry/2019/11/11/142428
関連記事
Vue Router ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/01/20/165026
Vue Router ～ パラメータの受け渡し ～
https://dk521123.hatenablog.com/entry/2021/03/02/001653
Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2020/12/19/000000
Vue CLI ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/22/192553
