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

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

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

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

Q&A

解決済

vue-router を使用したルーティングができない。

itsukimoromoro
itsukimoromoro

総合スコア1

Vue.js

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

1回答

0グッド

2クリップ

166閲覧

投稿2023/02/01 07:03

実現したいこと

Vue3を使用したルーティング

前提と問題

Vue3を使ってSPAの挙動を試したいが出来なかった。
ボタンを押したら指定したパスのコンポーネントへ遷移する物を試しで作りたいがボタン以外は何も出ず、遷移がされません。

ご教授いただけると幸いです。

components/Drawing.vue

1<template> 2 <div> 3 <img src="imge_test/1200x630.png" alt=""> 4 <hr> 5 <div class="d-flex justify-content-center"> 6 <button>stop</button> 7 <button>back</button> 8 <button>next</button> 9 </div> 10 </div> 11</template> 12 13<script> 14export default { 15 name: 'Drawing' 16} 17</script>

components/Index.vue

1<template> 2 Top 3</template> 4 5<script> 6export default { 7 name: 'Index' 8} 9</script>

App.vue

1<template> 2 <div id="app"> 3 <div> 4 <router-link to="/" class="btn btn-primary mx-2"> 5 Top 6 </router-link> 7 <router-link to="/drw" class="btn btn-warning"> 8 Drawing 9 </router-link> 10 </div> 11 <hr> 12 <router-view></router-view> 13 </div> 14</template> 15 16<script> 17export default { 18 name: 'App', 19} 20</script>

router.js

1import { createRouter, createWebHistory } from "vue-router"; 2import Drawing from './components/Drawing.vue' 3import Index from './components/Index.vue' 4 5export const router = createRouter({ 6 history: createWebHistory(), 7 routes: [ 8 { 9 path: '/', 10 name: 'index', 11 component: Index 12 }, 13 { 14 path: '/drw', 15 name: 'Drawing', 16 component: Drawing 17 } 18 ] 19})

main.js

1import { createApp } from 'vue' 2import App from './App.vue' 3import './index.css' 4import { router } from './router' 5 6var app = createApp(App) 7app.use(router) 8createApp(App).mount('#app') 9

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

main.jsの8行目をこれに変更すればどうでしょうか。

app.mount('#app')

投稿2023/02/03 05:08

donkuri

総合スコア77

itsukimoromoro👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

itsukimoromoro

2023/02/07 07:23

ありがとうございます!解決できました。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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