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

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

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

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1016閲覧

< router-view/>と書くとコンポーネントの内容が重複して表示されてしまう理由

widget11

総合スコア221

Vue.js

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2021/06/13 18:25

環境

vue2.6系で作成しています。
(ruby on railsのwebpacker経由でインストールしています)

問題

以下の様にshow.vue(ShowUser)からedit.vue(EditUser)にrouter-linkをクリックすると遷移させる動きをしたいのですが、特に名前をつけず<router-view/>と記載すると編集という文字が重複して表示されています。
編集というボタンを押すと遷移(描画はするのですが、片方の編集という文字は残ったままでedit.vueに遷移(描画)を行なってしまいます。
なぜこの様なことが起きるか全く理解できずにいるのですが、
vue-routerの仕組みやコンポーネントの仕組みに関して分かりかねているところがあるのでご教示いただけると幸いです。
よろしくお願いします。

####コード

// ../user_views/show.vue <template> <v-app id="users">   こちらはサンプルコードです  <router-link :to="{ path: '/user_page_edit', query: { value: this.user_id }}">編集</router-link> <router-view/> <!-- 該当箇所 --> </v-app> </template> <script> //省略 </script>
//router.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import ShowUser from '../user_views/show.vue' import EditUser from '../user_views/edit.vue' const routes =[ { path: '/user_page/:id', component: ShowUser, name:ShowUser}, { path: '/user_page_edit', component: EditUser, name: EditUser} ]; const router = new VueRouter({ routes, base: process.env.BASE_URL, mode: 'history' }); export default router;
//user.js import Vue from 'vue' import User from '../user_views/show.vue' import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; import router from "../router/router.js"; Vue.use(ElementUI, { locale }) Vue.use(Vuetify); document.addEventListener('DOMContentLoaded', () => { const user = new Vue({ router, vuetify, render: h => h(User) }).$mount() document.body.appendChild(user.$el) })

表示画像

イメージ説明

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

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

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

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

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

abrt29

2021/06/17 04:28

show.vue内の <router-view></router-view>を消してみてはいかがですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問