Vue-cliでVue-routerを使って簡単なSPAを作っています
以下の画像のようなUIを作って、topを押すとpage1の内容が表示されて、それ以外(page1~3)をクリックしても何も表示されません
コードは以下の通りです
App
1<template> 2 <div id="app"> 3 <div id="header"> 4 <!--リンクタグを生成します。--> 5 <router-link to="/">top</router-link> 6 <router-link to="/page1">page1</router-link> 7 <router-link to="/page2">page2</router-link> 8 <router-link to="/page3">page3</router-link> 9 </div> 10 <!--上記のリンクタグで設定したコンポーネントが表示される場所です。--> 11 <router-view></router-view> 12 </div> 13</template>
router
1import Vue from 'vue' 2import Router from 'vue-router' 3 4import page1 from '@/components/page1' 5import page2 from '@/components/page2' 6import page3 from '@/components/page3' 7 8Vue.use(Router) 9 10export default new Router({ 11 routes: [{ 12 path: '/', 13 component: page1 14 }, 15 { 16 path: '/', 17 component: page2 18 }, 19 { 20 path: '/', 21 component: page3 22 } 23 ] 24})
page1~3まで同じ内容です
page1
1<template> 2 <p>ここはトップページ1です。</p> 3</template> 4 5<script> 6</script> 7 8<style> 9</style>
urlはちゃんときりかわっているのは確認できたのですがなにか解決方法はありますか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。