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

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

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

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

Q&A

解決済

1回答

457閲覧

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

itsukimoromoro

総合スコア1

Vue.js

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

0グッド

2クリップ

投稿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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

app.mount('#app')

投稿2023/02/03 05:08

donkuri

総合スコア81

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

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

itsukimoromoro

2023/02/07 07:23

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問