VueJS: router.resolve issue

Question

A warning is shown in the console:

the id param was not provided.

The docs mention that the current route will be used:

current is the current Route by default (most of the time you don't need to change this)

html code:

<div id="app">
  <router-link to="/5">/5</router-link>
  <button @click="onClick">Resolve</button>
</div>

js code:

new Vue({
    el: '#app',

  router: new VueRouter({
    routes: [
        {
        name: 'foo',
        path: '/:id',
        component: {
            template: '<div>Foo <router-view/></div>',
        },
        children: [
            {
            name: 'bar',
            path: 'bar',
            component: {
                template: '<div>Bar</div>'
            }
          }
        ]
      },
    ],
  }),

  methods: {
    onClick() {
      console.log('Omitting current');
        this.$router.resolve({ name: 'bar' });
      console.log('Including current');
        this.$router.resolve({ name: 'bar' }, this.$route);
    }
  }
});

The documentation is frustratingly sparse re what that current parameter actually affects. My guess is you just need to explicitly provide the id param in the route object: this.$router.resolve({ name: 'bar', params: { id: this.$route.params.id } }) — thanksd

Yuichiro Smith Yuichiro Smith · Accepted Answer · 2020-05-19T07:48:36

I know this is overdue, but I'll share what I found.

When you call $router.resolve(), it uses vue-router/src/util/location.js's normalizeLocation() to get the Location object.

And you can see there that the current? option is only used to resolve relative paths.

The only case where current.params is included in the new Location is when the given RawLocation is relative, and includes params itself.

VueJS: router.resolve issue

1 Answers