0

currently testing a Vue.js-System.js app before moving it to webpack2, I am facing an issue with the routing pattern.

From my OPA Memberships component , when clicking on a link, I want to request a Registration page from the router. I used

components/index.js

import Memberships from "components/Memberships/index";
// all the components in the OPA which are not in the routes
....
export {
  ....
   Memberships,
  ....
}

component Memberships template

....
<a type="button" @click="router.go('/registrations')"  href="">REGISTRATION</a>

and I get the following error :

return  scope.router.go('/registrations');

Source map error: request failed with status 404
Resource URL: http://127.0.0.1:8080/libs/js/system.js
Source Map URL: system@0.18.17.js.map

If I remove the href="" then I get 

scope.router undefined

In my routes/index.js, the registration route is defined :

routes/index.js

  import Registrations from 'routes/Registrations/index';
  export default {
    ...
    '/registrations': {
        component: Registrations
  },
...
};

and the

1 Answers1

0

forgot 'this.' in Vue.js 2 I should use :

@click="this.$router.go('/registrations')"

no href="" ..

In oreer to scromm to the top of the destination page , I had to add 

ready() {
    var vm = this;
    document.body.scrollTop = document.documentElement.scrollTop = 0;
},

in the destination component index.js