Open rigor789 opened 4 years ago
Ran into this today with a new cli build (per the README) using templates/simple.
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:8429 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
###############
Clicked "About" button
###############
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'push' of undefined"
found in
---> <App> at src/App.vue
<Root>
I now have a functional web build after deleting src/router.js and applying this patch to the generated main.js file:
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,12 @@
import Vue from 'vue'
import App from '~/App.vue'
+import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
+ router,
store,
render: (h) => h(App)
}).$mount('#app')
With src/router.js gone, the import is now reading src/router.index.js, which has working logic (unmodified since installing this plugin). Then the patch above imports and passes to Vue
in the standard way.
I did not have to change case of the goTo()
parameters. The navigation buttons work as expected now for web. Maybe the case issue only applies to native builds.
I am facing the same problem for a new 'Dual' 'simple template' and 'history mode on' test project. Moving /router.js
out of /src
and re-importing ./router/index.js
in main.native.js
indeed throws an error when npm run serve:ios
since I'm not exporting options that main.native.js
requires.
WARNING in ./main.native.js 42:13-20
"export 'options' was not found in './router/index.js'
@ multi ./main.native
@rigor789 would that be possible that you share how you refactored router/index.js
and updated routes.reduce
function?
Edit: I managed to make it work for Home and other routes, but not for About page.
my edit was to add an export to src/router/index.js
as in
// ...
export const options = {
routes: routes
}
export default router
I didn't change options.route.reduce()
function in main.native.js
(which probably is the reason why routing to About page isn't working) but changed the import line to
import { options } from './router/index.js'
now the routes
object in main.native.js
looks like this (I copied About.vue to Terms.vue to make sure it's working):
{
Home: {
component: {
name: 'home',
components: {
HelloWorld: {
name: 'HelloWorld',
props: {},
staticRenderFns: [],
_compiled: true,
__file: 'components/HelloWorld.native.vue'
}
},
staticRenderFns: [],
_compiled: true,
__file: 'views/Home.vue'
}
},
Terms: {
component: {
staticRenderFns: [],
_compiled: true,
__file: 'views/Terms.vue'
}
},
About: {}
}
I also changed the routing as rigor789 suggested in App.vue
to:
<Button text="Home" @tap="goTo('Home')" row="0" />
<Button text="Terms" @tap="goTo('Terms')" row="1" />
Though routing to About.vue
still isn't working, I believe this change works for my use-case at least for now.
Looks like router generation is currently broken, the generated file (
src/router.ts
) contains the following:This is definitely not the desired result. A
router/index.ts
file is also generated, which looks correct for the most part, but theimport { options } from './router'
inmain.native.ts
no longer works.After manually refactoring
router/index
to export the routes, and updating theroutes.reduce
function inmain.native
the app builds, but seems like the default route names have changed from lowercase to titlecase sogoTo('home')
andgoTo('about')
no longer work unless we either change the route names, or update thegoTo
calls to use the correct casing (home -> Home, about -> About).Originally posted by @rigor789 in https://github.com/nativescript-vue/vue-cli-plugin-nativescript-vue/pull/35#issuecomment-586279840