現在、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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/19 12:25
退会済みユーザー
2018/08/19 12:26
2018/08/19 12:40