Vue.js勉強記録その25 Vue3を更にパワーアップしよう 5-2 ver2

Vue.js3超入門

こちらの書籍で勉強中です。
今回は、前回のルーティングの続きで、名前付きビューの話です。

また、パラメーターの扱いについても書いていきます。

■Vue Routerによるルーティング管理

・名前付きビュー

前回の記事で書いた、router-viewには、name属性をつけて、表示させるコンポーネントを指定することが出来る。

router.jsを以下の様に書き換える。

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from "./components/HelloWorld.vue";
import HelloJSX from "./components/HelloJSX.jsx";

export const router = createRouter({
   history: createWebHistory(),
   routes: [
       {
           path: '/',
           name: 'index',
           components: {
               default: HelloWorld,
               first: HelloWorld,
               second: HelloJSX
           }
       },
       {
           path: '/jsx',
           name: 'jsx',
           components: {
               default: HelloJSX,
               first: HelloJSX,
               second: HelloWorld
           }
       }
   ]
})

componentsの書き方が、オブジェクトになっている。

components:{
    default:デフォルトのコンポーネント,
    名前:割り当てるコンポーネント,
    ・・・必要なだけ用意・・・
}

こんな感じで指定する。
router-viewで、name属性に上記の記述で書いた名前を書く。
name属性がない場合は、defaultの値が使われる。

components:{
    default:Normal,
    abc:ABC,
}
この場合、
////////////////////////

<router-view></router-view> これは、Normal

<router-view name="abc"></router-view> これはABC

今回のrouter.jsは、以下の様な内容になっている。

pathが/の時
default:HelloWorld
first:HelloWorld
second:HelloJSX

pathが/jsxの時
default:HelloJSX
first:HelloJSX
second:HelloWorld

お互いに互い違いになる感じに書かれている。

App.vue

<template>
 <div>
   <router-link to="/" class="btn btn-primary mx-2"> Go to Top </router-link>
   <router-link to="/jsx" class="btn btn-warning"> Go to JSX </router-link>
 </div>
 <hr />
 <h5>default view</h5>
 <router-view />
 <h5>A & B</h5>
 <router-view name="first"></router-view>
 <router-view name="second"></router-view>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     title: "Router",
   };
 },
};
</script>

router-viewは合計3つあり、名前なし、fitst、secondの順で書かれている。

パスが「/」の時

パスが、「/jsx」の時

こんな感じになる。

first、secondに割り当てたコンポーネントがパスによって変わるのがわかる。

・パラメーターの使用

urlにパラメーターを指定したい時。

Helloworld.vue
<h1>{{ data.title + "[" + name + "]" }}</h1>でnameパラメータを使用

<template>
 <div class="alert alert-primary">
   <h1>{{ data.title + "[" + name + "]" }}</h1>
   <p class="mt-3 h5">{{ data.msg }}</p>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 name: "HelloWorld",
 props: {
   name: String,
 },
 setup(props, context) {
   const data = reactive({
     title: "Router",
     msg: "This is HelloWorld component",
   });
   return { data };
 },
};
</script>

HelloJSX.jsx
<h1>{data.title}[{props.name}]</h1>で、name属性を使用

import { ref, reactive } from 'vue'

export default {
   name: 'HelloJSX',
   props: {
       name: String
   },
   setup(props) {
       const data = reactive({
           title: 'Router',
           msg: 'This is JSX component sample.'
       })
       return () => (
           <div class='alert alert-warning'>
               <h1>{data.title}[{props.name}]</h1>
               <p>{data.msg}</p>
           </div>
       )
   }
}

router.js

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from "./components/HelloWorld.vue";
import HelloJSX from "./components/HelloJSX.jsx";

export const router = createRouter({
   history: createWebHistory(),
   routes: [
       {
           path: '/',
           redirect: '/index/taro'
       },
       {
           path: '/index/:name',
           name: 'index',
           component: HelloWorld,
           props: true
       },
       {
           path: '/jsx/:name',
           name: 'jsx',
           component: HelloJSX,
           props: true
       }
   ]
})

ルーターでパラメータを使用する方法

{
path: '/index/:name',
name: 'index',
component: HelloWorld,
props: true
},

こんな感じで、パスに、:パラメータ名をつける今回の場合は、nameがパラメータ。

/index/taro

このURLの場合、taroがパラメータになる。

なお、routerの設定の一番最初にある、
{
path: '/',
redirect: '/index/taro'
},
この部分は、リダイレクトになる。
ルートパスにアクセスしたら、/index/taroに飛ぶ様になる。

App.vueを以下に変更。上部のボタンのtoの値が変わっている

<template>
 <div>
   <router-link to="/index/taro" class="btn btn-primary mx-2">
     Go to Top
   </router-link>
   <router-link to="/jsx/hanako" class="btn btn-warning">
     Go to JSX
   </router-link>
 </div>
 <hr />
 <router-view></router-view>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     title: "Router",
   };
 },
};
</script>

/index/TAROにアクセスすると、以下の感じ

jsx/HANAKOにアクセすると以下の感じ。

なお、パラメータを複数設定したい時などは、以下の書き方が便利。

:to="{name:ルーターの名前,params:{パラメータ名:値,,,,,}}"

App.vue

<template>
 <div>
   <router-link
     :to="{ name: 'index', params: { name: 'TARO' } }"
     class="btn btn-primary mx-2"
   >
     Go to Top
   </router-link>
   <router-link
     :to="{ name: 'jsx', params: { name: 'HANAKO' } }"
     class="btn btn-warning"
   >
     Go to JSX
   </router-link>
 </div>
 <hr />
 <router-view></router-view>
</template>

■まとめ

今回でrouterに関してが終わりになります。

ページを読み込まないで遷移させる方法は、ぜひ習得したいので、しっかり復習したいです。