0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

カルネージハートとは関係ない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年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします!

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?