Web言語マスター復活への道/22日目

vue.jsやっていきます！1セクションが重いです。

目標

・vue.js vue router（udemy）

本日の作業

・vue.router設定

<router-view>を用いて単一ファイルを高速に表示することができます。

route.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Users from "./views/Users.vue";
import UsersPosts from "./views/UsersPosts.vue";
import UsersProfile from "./views/UsersProfile.vue";

Vue.use(Router);

export default new Router({
   mode: "history",
   routes: [
       {   path: "/", component: Home }, 
       {   path: "/users/:id", 
           component: Users,
           props: true,
           children: [
               { path: "posts", component: UsersPosts },
               { path: "profile", component: UsersProfile },
       ]
   }
   ]
});

結果

動的リンク

結果

結果
”Home””Users”以上と以下でrouterの参照場所（ファイル）が違います。

動的routerの確認も実施。script内に記載してあるNumber(id) + 1で、ユーザー番号が増えていく仕組み

Users.vue

<template>
   <div>
       <h3>Users</h3>
       <router-link to="/users/1">ユーザー1</router-link>
       <router-link to="/users/2">ユーザー2</router-link>
       <hr>
       <h1>User No. {{ id }}</h1>
       <router-link :to="'/users/' + (Number(id) + 1) + '/profile' ">次のユーザー</router-link>
       <router-view></router-view>
   </div>
</template>


<script>
export default {
   props: ["id"]  
};
</script>

所感

vuerouterはカスタマイズしやすいので、今後使えるだろうなと思いました。次回vuexの予定です。