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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

受付中

Vue3で動的にタイトルを変更したい

sengoku38
sengoku38

総合スコア24

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0回答

0グッド

1クリップ

243閲覧

投稿2022/11/29 12:36

前提

Vue CLIを使って環境を作りました。

日本語ページと英語ページがあり、Vue3でSPAでページを変えるとタイトルを動的に変えたく、
参考サイトを見てプログラミングしたのですが、
タイトルがundefinedになってしまいます。

実現したいこと

タイトルを動的に変えたい。

該当のソースコード

src/router/index.ts

ts

1import { createRouter, createWebHashHistory } from 'vue-router' 2import JaView from '../components/JaView.vue' 3import EnView from '../components/EnView.vue' 4const routes = [ 5 { 6 path: '/', 7 name: 'ja', 8 component: JaView, 9 meta: { 10 title: '日本語ページ' 11 } 12 }, 13 { 14 path: '/en', 15 name: 'EnView', 16 component: EnView, 17 meta: { 18 title: '英語ページ' 19 } 20 // route level code-splitting 21 // this generates a separate chunk (about.[hash].js) for this route 22 // which is lazy-loaded when the route is visited. 23 // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') 24 }, 25] 26const router = createRouter({ 27 history: createWebHashHistory(), 28 routes 29}) 30 31export default router 32

src/App.vue

ts

1<script lang="ts" setup> 2import { ref, onMounted } from 'vue' 3import { useRoute } from 'vue-router' 4import JaView from './components/JaView.vue' 5import EnView from './components/EnView.vue' 6 7const cur = ref<number>(0); 8onMounted(() => { 9 document.title = useRoute().meta.title 10 console.log(useRoute().meta.title); 11}) 12</script> 13<template> 14 <div class="tab-wrap"> 15 <input name="lang" id="tab_ja" type="radio" class="tab-switch" checked> 16 <router-link to="/"><label for="tab_ja" class="tab-label" v-on:click="cur=0" v-bind:class="{'tab-switch-active' : (cur === 0)}">日本語</label></router-link> 17 <input name="lang" id="tab_en" type="radio" class="tab-switch"> 18 <router-link to="/en"><label for="tab_en" class="tab-label" v-on:click="cur=1" v-bind:class="{'tab-switch-active' : (cur === 1)}">英語</label></router-link> 19 </div> 20 <form> 21 <div class="contents"> 22 <div v-show="cur === 0"> 23 <JaView></JaView> 24 </div> 25 <div v-show="cur === 1"> 26 <EnView></EnView> 27 </div> 28 </div> 29 </form> 30</template> 31

補足情報(FW/ツールのバージョンなど)

  • vue 3.2.13
  • vue-router 4.1.6

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。