vueのrouterの設定

vue-router

vue-routerを使ってみよう！備忘録

ファイル構成

今回関係あるファイル

• route.js
• main.js
• App.vue
• pages
  • A.vue
  • B.vue
• components
  • PageContent.vue

App.js

template内にrouter-linkを設置

<template>
  <div id="app">
    <router-link to="/a">go to A</router-link>
    <span>｜</span>
    <router-link to="/b">go to B</router-link>
    <router-view></router-view>
  </div>
</template>

PageContent.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>ページの内容をそれぞれ表示するためのコンポーネント</p>
  </div>
</template>

<script>
export default {
  name: "PageContent",
  props: {
    msg: String
  }
};
</script>

A.vue

<template>
  <div id="app">
    <PageContent msg="A" />
  </div>
</template>

<script>
import PageContent from "@/components/PageContent";

export default {
  name: "A",
  components: {
    PageContent
  }
};
</script>

B.vue

<template>
  <div id="app">
    <PageContent msg="B" />
  </div>
</template>

<script>
import PageContent from "@/components/PageContent";

export default {
  name: "B",
  components: {
    PageContent
  }
};
</script>

route.js

import Vue from "vue";
import VueRouter from "vue-router";
import A from "@/pages/A";
import B from "@/pages/B";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: A,
  },
  {
    path: "/a",
    component: A,
  },
  {
    path: "/b",
    component: B,
  },
];

const router = new VueRouter({
  routes: routes,
});

export default router;

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./route.js";

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

参考🙏：
Vue Routerの書き方、使い方について解説
https://www.e-loop.jp/knowledges/14/