Migration from Vue Router 0.7.x

Only Vue Router 2 is compatible with Vue 2, so if you’re updating Vue, you’ll have to update Vue Router as well. That’s why we’ve included details on the migration path here in the main docs. For a complete guide on using the new Vue Router, see the Vue Router docs.

Router Initialization

router.startreplaced

There is no longer a special API to initialize an app with Vue Router. That means instead of:

Then when later accessing this property on a route, you will still go through meta. For example:

if (route.meta.requiresAuth) {
// ...
}

Upgrade Path

Run the migration helper on your codebase to find examples of arbitrary route properties not scoped under meta.

[] Syntax for Arrays in Queries removed

When passing arrays to query parameters the QueryString syntax is no longer /foo?users[]=Tom&users[]=Jerry, instead, the new syntax is /foo?users=Tom&users=Jerry. Internally, $route.query.users will still be an Array, but if there’s only one parameter in the query: /foo?users=Tom, when directly accessing this route, there’s no way for the router to know if we were expecting users to be an Array. Because of this, consider adding a computed property and replacing every reference of $route.query.users with it:

Route Matching

Route matching now uses path-to-regexp under the hood, making it much more flexible than previously.

One or More Named Parameters changed

The syntax has changed slightly, so /category/*tags for example, should be updated to /category/:tags+.

Upgrade Path

Run the migration helper on your codebase to find examples of the obsolete route syntax.

Links

v-linkreplaced

The v-link directive has been replaced with a new <router-link> component, as this sort of job is now solely the responsibility of components in Vue 2. That means whenever wherever you have a link like this:

<a v-link="'/about'">About</a>

You’ll need to update it like this:

<router-link to="/about">About</router-link>

Note that target="_blank" is not supported on <router-link>, so if you need to open a link in a new tab, you have to use <a> instead.

Upgrade Path

Run the migration helper on your codebase to find examples of the v-link directive.

v-link-activereplaced

The v-link-active directive has also been replaced by the tag attribute on the <router-link> component. So for example, you’ll update this:

<li v-link-active>
<a v-link="'/about'">About</a>
</li>

to this:

<router-link tag="li" to="/about">
<a>About</a>
</router-link>

The <a> will be the actual link (and will get the correct href), but the active class will be applied to the outer <li>.

Upgrade Path

Run the migration helper on your codebase to find examples of the v-link-active directive.

Programmatic Navigation

router.gochanged

Upgrade Path

Run the migration helper on your codebase to find examples of router.go being used where router.push should be used instead.

Router Options: Modes

hashbang: falseremoved

Hashbangs are no longer required for Google to crawl a URL, so they are no longer the default (or even an option) for the hash strategy.

Upgrade Path

Run the migration helper on your codebase to find examples of the hashbang: false option.

history: truereplaced

All routing mode options have been condensed into a single mode option. Update:

var router = new VueRouter({
history: 'true'
})

to:

var router = new VueRouter({
mode: 'history'
})

Upgrade Path

Run the migration helper on your codebase to find examples of the history: true option.

abstract: truereplaced

All routing mode options have been condensed into a single mode option. Update:

var router = new VueRouter({
abstract: 'true'
})

to:

var router = new VueRouter({
mode: 'abstract'
})

Upgrade Path

Run the migration helper on your codebase to find examples of the abstract: true option.

Route Options: Misc

saveScrollPositionreplaced

This has been replaced with a scrollBehavior option that accepts a function, so that the scroll behavior is completely customizable - even per route. This opens many new possibilities, but to simply replicate the old behavior of: