1. Overview
This overview video covers: installation, main concepts, dynamic routes and more.
Vue: Routing For Dummies
https://www.youtube.com/watch?v=-uCUCmrNgeo
In this article: installation, the router object, defining routes, dynamic routes, props and nested routes.
The Vue Router
Official documentation
Introduction | Vue Router
2. Programmatic navigation
As mentioned in the official documentation: "Aside from using <router-link> to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods."
We have the following methods available:
this.$router.push(location, onComplete?, onAbort?)this.$router.replace(location, onComplete?, onAbort?)this.$router.go(n)
The different between push() and replace() is that push() go to a new route and adds a new item to the browser history. replace() , however, does the same but does not push a new entry into the history stack.
// literal string path
router.push('home')
// object
router.push({
path: 'home'
})
// named route
router.push({
name: 'user',
params: {
userId: '123'
}
})
// with query, resulting in /register?plan=private
router.push({
path: 'register',
query: {
plan: 'private'
}
})