カルネージハートとは関係ないVue Router内でVueAppにアクセスする

カルネージハート Advent Calendar 2019 8日目の記事です。

今回はカルネージハートとは全く関係ないVue Router内でVueAppにアクセスする話です。

route.jsの設定

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/page/Home'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ]
});

export default router

こんな感じでVue Routerを設定している場合、console.log(router)でアクセスできる当たり前だ

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/page/Home'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ]
});

console.log(router);

export default router

beforeEachで毎回API通信してなんかやりたいときも

import axios from "axios"
・
・
・
router.beforeEach((to, from, next) => {
  axios.get("/api/category").then(response => {
  });
})
export default router

のような感じで

または

router.beforeEach((to, from, next) => {
  router.app.$http.get("/api/category").then(response => {
    console.log(response.data);
  });
・
・
・

app.jsなどでVue.prototype.$http = axiosを設定ずみ

Axiosを使ってAPI通信も可。

最後に

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！