Vue js router-view , router-linkについて
過去記事の続きです。
kirikko-scondcube.hatenablog.com
kirikko-scondcube.hatenablog.com
今回最初に操作するのは
src/App.vue
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
ここで注目するのが
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
この
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
と
<router-view/>
の部分
この2つはrouter/index.js内でルーターモジュールを読み込んだことで使えるようになる。
＊疑問点＊
ルーターモジュールとは？？
<router-view/>
について
この部分にルートに合わせたコンポーネント が表示される。
そのため全てのページで使用するグローバルビューはこの部分の外側に記述する
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
について
これはデフォルトの内容で
Homeとaboutのページを行き来するためにしようされている。
上記「to='/'」のように記述しパスを指定する。
ルートに名前をつけて指定することも可能
その場合は以下のように書き換える
<router-link to="{name: 'home'}">Home</router-link> |
<router-link to="{name: 'about'}">About</router-link>
この記述方法のメリットはパスが変わっても適用可能と言う点にある。
基本はこちらが推奨される。
また、内のHome, Aboutの記述を帰ればリンクを変更できる
（文字列を変えたりimgにリンクを貼れたりする）
<router-link to="{name: 'home'}"><img width='100' src="https://images.unsplash.com/photo-1595970731082-f7267436b6f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></router-link> |
<router-link to="{name: 'about'}">アバウト</router-link>
結果
