vue router push
//Syntax - this.$router.push(path); this.$router.push("/path");
Vue router push
const username = 'eduardo' // we can manually build the url but we will have to handle the encoding ourselves router.push(`/user/${username}`) // -> /user/eduardo // same as router.push({ path: `/user/${username}` }) // -> /user/eduardo // if possible use `name` and `params` to benefit from automatic URL encoding router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` cannot be used alongside `path` router.push({ path: '/user', params: { username } }) // -> /user
Source: router.vuejs.org
router.push in vue 3
// literal string path router.push('/users/eduardo') // object with path router.push({ path: '/users/eduardo' }) // named route with params to let the router build the url router.push({ name: 'user', params: { username: 'eduardo' } }) // with query, resulting in /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // with hash, resulting in /about#team router.push({ path: '/about', hash: '#team' })
Source: router.vuejs.org
router.push in vue 3
import { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, }, }) } }, }
Source: router.vuejs.org