Broken router generator

[rigor789]

Looks like router generation is currently broken, the generated file (src/router.ts) contains the following:

module.exports = (api, options) => {
  require('@vue/cli-plugin-router/generator')(api, {
    historyMode: options.routerHistoryMode,
  };
  export default new Router(options);
};

This is definitely not the desired result. A router/index.ts file is also generated, which looks correct for the most part, but the import { options } from './router' in main.native.ts no longer works.

After manually refactoring router/index to export the routes, and updating the routes.reduce function in main.native the app builds, but seems like the default route names have changed from lowercase to titlecase so goTo('home') and goTo('about') no longer work unless we either change the route names, or update the goTo calls to use the correct casing (home -> Home, about -> About).

Originally posted by @rigor789 in #35 (comment)

[sh78]

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.

[xerroxcopy]

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?

[xerroxcopy]

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.