質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

4753閲覧

vue-routerが動作しない。urlは変わるけど、画面が遷移しません。

RyoKawamata

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/09/15 08:15

今vue.jsの練習で、vue-cli3を使ってSPAの開発を行っています。

以下のようなファイルでvue-routerを利用しているのですが、動作しません。
状態としては、、

  • urlは変わる
  • 画面の再描画はしない
  • Errorも出ていない。

です。
main.jsか、router.jsの記述ミスかと思うのですが、
もうかれこれ3時間以上詰まっています。
お助け願います。

main.js

main.js

1import Vue from 'vue' 2import './plugins/vuetify' 3import VueApollo from "vue-apollo" 4import {ApolloClient} from 'apollo-client' 5import {HttpLink} from 'apollo-link-http' 6import {InMemoryCache} from 'apollo-cache-inmemory' 7import App from './App' 8import router from './router' 9 10const GRAPHCMS_API = "https://api-euwest.graphcms.com/v1/cjlk8ny4507ca01bv4owmdlw1/master" 11const apolloClient = new ApolloClient({ 12 link: new HttpLink({uri: GRAPHCMS_API}), 13 cache: new InMemoryCache() 14}) 15 16Vue.use(VueApollo) 17 18const apolloProvider = new VueApollo({ 19 defaultClient: apolloClient 20}) 21 22Vue.config.productionTip = false 23 24new Vue({ 25 router, 26 provide: apolloProvider.provide(), 27 render: h => h(App), 28}).$mount('#app') 29

router.js

router.js

1import Vue from 'vue'; 2import VueRouter from 'vue-router'; 3 4Vue.use(VueRouter); 5 6const routes = [ 7 { 8 path: '/', 9 name: "home", 10 component: () => import('./App.vue') 11 }, 12 { 13 path: '/detail', 14 name: "detail", 15 component: () => import('./Detail.vue') 16 }, 17] 18 19const router = new VueRouter({ 20 routes: routes, 21 base: process.env.BASE_URL, 22 mode: 'history' 23}); 24 25export default router; 26

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

App.vueにて

<router-view></router-view>

を追加したところ解決しましhた。

投稿2018/09/15 08:36

RyoKawamata

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問