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

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

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

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

Q&A

解決済

1回答

1742閲覧

動的ルートマッチングが上手くできない(vue.js)

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

0グッド

0クリップ

投稿2018/08/19 02:10

現在、vue.jsとcordova、framework7を使用してアプリの開発を行なっております。
アプリ開発が初めてなのですが、vue.jsの動的ルートマッチングを実装しようと
している中でエラーになってしまうため、お力添えをいただけますと幸いです。。

◼️やりたいこと
・リンク先のpathが’/member/13’にような時に13をパラメータとして受け取りたい
(目的は受け取ったパラメータを元に会員個別の情報を表示したい)

◼️事象
・下記に記載するようなエラーがコンソールに吐き出されている
(VueRouterを使用していないときは表示されない)
<router-link>で囲ったテキストが表示されない
※動作確認はnom run devでブラウザで行なっております

◼️ご依頼事項
もしかすると初歩的なご質問で大変申し訳ありません、本事象について、
原因や要修正箇所をご教示頂けますと幸いです。

<router.js>

import Vue from 'vue' import Router from 'vue-router' import VueRouter from 'vue-router' Vue.use(VueRouter) //export default [ export default new Router({ routes: [ { path: '/about/', component: require('./pages/about.vue') }, { path: '/location/', component: require('./pages/location.vue') }, { path: '/attraction/:attractionId', component: require('./pages/attraction.vue') }, { path: '/home/', component: require('./pages/Home.vue') }, { path: '/purchase/', component: require('./pages/purchase.vue') }, { path: '/confirm/', component: require('./pages/confirm.vue') }, { path: '/complete/', component: require('./pages/complete.vue') }, { path: '/member/:id', name: 'Member', component: require('./pages/member.vue') } ] })

<app.vue>

<div class="main" style="margin-top:0px; margin-bottom:70px; padding-top:0px;"> <div class="toptopic"> <p style="margin:0px 0px 15px 0px; font-size:22px; width:100%; float:left;text-align:center; color:#FF6B86; font-weight:bold;">ともだちを探す</p> <f7-block v-for="datum of data"> <div style="float:left; width:45%; margin-left:4%; position:relative"> //<a href="/member/1" style="width:100%; height:100%; position:absolute;"></a> //<router-link v-bind:to="{ name : 'Member', params : { id: 11 }}"></router-link> <router-link :to="{path: '/member'}">test</router-link> <div style="width:100%; float:left; "> <img src="https://honbat.com/img/images.jpeg" style="width:130px; height:130px; border-radius:100%;"> </div> <div style="width:100%; float:left;" > <p style="width:100%; float:left; margin:0px; font-size:15px; color:#393939; font-weight:bold;">Mami</p> <p style="width:100%; float:left; margin:0px; font-size:12px;">初めまして!宜しくお願い致します!</p> </div> </div> </f7-block> </div> </div>

<エラー内容>

vue.esm.js?65d7:591 [Vue warn]: Error in mounted hook: "TypeError: e.reduce is not a function" (found in <Root>) TypeError: e.reduce is not a function at Re (framework7-vue.min.js?e05a:16) at new Ne (framework7-vue.min.js?e05a:16) at j (framework7-vue.min.js?e05a:16) at Vue.mounted (framework7-vue.min.js?e05a:16) at callHook (vue.esm.js?65d7:2921) at mountComponent (vue.esm.js?65d7:2802) at Vue.$mount (vue.esm.js?65d7:8540) at Vue.$mount (vue.esm.js?65d7:10939) at Vue._init (vue.esm.js?65d7:4640) at new Vue (vue.esm.js?65d7:4729) [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" found in ---> <RouterLink> <F7Block>... (1 recursive calls) <F7Tab> <F7Tabs> <F7Page> <F7Pages> <F7View> <F7Views> <App> at /Users/homma/Desktop/mamaness/src/app.vue <Root> vue.esm.js?65d7:1741 TypeError: Cannot read property 'resolve' of undefined at Proxy.render (vue-router.esm.js?880d:409) at VueComponent.Vue._render (vue.esm.js?65d7:4544) at VueComponent.updateComponent (vue.esm.js?65d7:2788) at Watcher.get (vue.esm.js?65d7:3142) at new Watcher (vue.esm.js?65d7:3131) at mountComponent (vue.esm.js?65d7:2795) at VueComponent.Vue.$mount (vue.esm.js?65d7:8540) at VueComponent.Vue.$mount (vue.esm.js?65d7:10939) at init (vue.esm.js?65d7:4137) at createComponent (vue.esm.js?65d7:5608) [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" found in ---> <RouterLink> <F7Block>... (1 recursive calls) <F7Tab> <F7Tabs> <F7Page> <F7Pages> <F7View> <F7Views> <App> at /Users/homma/Desktop/mamaness/src/app.vue <Root> TypeError: Cannot read property 'resolve' of undefined at Proxy.render (vue-router.esm.js?880d:409) at VueComponent.Vue._render (vue.esm.js?65d7:4544) at VueComponent.updateComponent (vue.esm.js?65d7:2788) at Watcher.get (vue.esm.js?65d7:3142) at new Watcher (vue.esm.js?65d7:3131) at mountComponent (vue.esm.js?65d7:2795) at VueComponent.Vue.$mount (vue.esm.js?65d7:8540) at VueComponent.Vue.$mount (vue.esm.js?65d7:10939) at init (vue.esm.js?65d7:4137) at createComponent (vue.esm.js?65d7:5608) vue.esm.js?65d7:591 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" found in ---> <RouterLink> <F7Block>... (1 recursive calls) <F7Tab> <F7Tabs> <F7Page> <F7Pages> <F7View> <F7Views> <App> at /Users/homma/Desktop/mamaness/src/app.vue <Root>

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

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

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

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

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

guest

回答1

0

ベストアンサー

<router-link :to="{path: '/member'}">test</router-link>

と書かれていますが /member というルートが存在しません。/member/:id だけでなく /member も別で定義しなければなりません。確か未定義のルートを指定したり to 属性を指定しなかったりすると [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" のようなエラーが出た気がします。

それと <RouterLink> が DOM のかなり上位の部分に定義されていますので、router-view コンポーネントと間違えてそうです。

---> <RouterLink> <F7Block>... (1 recursive calls) <F7Tab> <F7Tabs> <F7Page> <F7Pages> <F7View> <F7Views> <App> at /Users/homma/Desktop/mamaness/src/app.vue <Root>

投稿2018/08/19 11:41

yhg

総合スコア2161

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

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

退会済みユーザー

退会済みユーザー

2018/08/19 12:25

ありがとうございます! ルートの定義とDOMの定義階層を下げたらエラーが出なくなりました! ただ、エラーは出ないのですが、リンクをクリックしても遷移ができない状態であるため、 またご相談させていただけますと幸いでございます。。
退会済みユーザー

退会済みユーザー

2018/08/19 12:26

以下がmain.jsなのですが、routerの呼び出しがもしかしたら間違っておりますでしょうか。。? // Import Vue import Vue from 'vue' // Import F7 import Framework7 from 'framework7' // Import F7 Vue Plugin import Framework7Vue from 'framework7-vue' // Import F7 iOS Theme Styles import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css' import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css' // import Framework7Theme from 'framework7/dist/css/framework7.material.min.css' // import Framework7ThemeColors from 'framework7/dist/css/framework7.material.colors.min.css' import Framework7Icons from 'framework7-icons/css/framework7-icons.css' // Import Routes import Routes from './routes.js' // Import App Component import App from './app' import * as VueGoogleMaps from 'vue2-google-maps' // Init F7 Vue Plugin Vue.use(Framework7Vue) Vue.use(VueGoogleMaps, { load: { key: 'AIzaSyAo6ESWGbZIll8-zF6e2RgfdUtSmmwK2-0', libraries: 'places', // This is required if you use the Autocomplete plugin }, //// If you intend to programmatically custom event listener code //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`) //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`) //// you might need to turn this on. // autobindAllEvents: false, //// If you want to manually install components, e.g. //// import {GmapMarker} from 'vue2-google-maps/src/components/marker' //// Vue.component('GmapMarker', GmapMarker) //// then disable the following: // installComponents: true, }) // Init App new Vue({ el: '#app', template: '<app/>', // Init Framework7 by passing parameters here framework7: { root: '#app', /* Uncomment to enable Material theme: */ // material: true, router: Routes, }, // Register App Component components: { app: App } })
yhg

2018/08/19 12:40

こちらのソースは間違っていないと思います。 cordova 触ったことないのでいまいちデバッグ方法など分からないのですが、Chrome の開発者ツールのようなものが開けるなら、クリックしたときにエラーが出るかどうか、要素が <router-link> から <a> にきちんと置換されているかどうかなどを確認すると良いかなと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問