Vue Router Patterns Chapter 20We can then add a method that pushes a new route onto the route stack:
<script>
export default {
methods: {
navigateToRoute(routeName) {
this.$router.push({ path: routeName });
},
},
};
</script>At this point, any time we select a button, it should subsequently navigate the user to the
appropriate route. The $router.push() function can take a variety of different
arguments, depending on how you have your routes set up. Here are some examples:
// Navigate with string literal
this.$router.push('hello')// Navigate with object options
this.$router.push({ path: 'hello' })// Add parameters
this.$router.push({ name: 'hello', params: { name: 'Paul' }})// Using query parameters /hello?name=paul
this.$router.push({ path: 'hello', query: { name: 'Paul' }})router.replace
Instead of pushing a navigation item on the stack, we can also replace the current history
stack with router.replace. Here's an example of this:
this.$router.replace({ path: routeName });router.go
If we want to navigate the user backward or forward, we can use router.go; this is
essentially an abstraction over the window.history API. Let's take a look at some
examples:
// Navigate forward one record
this.$router.go(1);// Navigate backward one record