How to Use Vue Router's Push Function
Jul 23, 2021
With Vue Router, you can use its
router.push() function to programmatically navigate between routes on your site.
You can either call push() with a string path, or with an object containing either the path or name of the route.
const router = new VueRouter({
routes: [
{
path: '/home',
component: { template: '<h1>Home</h1>' }
},
{
path: '/about',
component: { template: '<h1>About Us</h1>' }
},
{
path: '/user/:id',
name: 'user',
component: { template: '<h1> Your id is {{$route.params.id}} </h1>' }
}
]
});
const app = new Vue({
router,
methods: {
changeRoute(route) {
// `route` is either a string or object
router.push(route);
}
},
template: `
<div id="rendered-content">
<div>
<button @click="changeRoute('home')">Home</button>
<button @click="changeRoute('about')">About Us</button>
<button @click="changeRoute({path: '/user/123'})">Get ID</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
`
}).$mount('#example');Passing Parameters
To pass parameters using router.push(), you can do one of the following:
router.push({ name: 'user', params: {id: 123}});
// or
const id = 123;
router.push({ path: `/user/${id}` });To then access it, use whatever you declared in the router as the object property name.
If the route was /user/:id the path would be $route.params.id or you could access
it as a prop by adding a props:true object in the route.
{
path: '/user/:id',
component: { template: '<h1>Your id is {{$route.params.id}}</h1>' },
props:true
},Here's a live demo.
Vue School has some of our favorite Vue
video courses. Their Vue.js Master Class walks you through building a real
world application, and does a great job of teaching you how to integrate Vue
with Firebase.
Check it out!
Did you find this tutorial useful? Say thanks by starring our repo on GitHub!