Como redirecionar no Vue
Eu já criei dois posts sobre o vue-router, e você pode ver respectivamente o artigo 1 e 2 clicando aqui e aqui.
Já sabendo como trabalhar com o vue-router, para redirecionar é simples, é só importar o useRouter do vue-router, claro na Composition API, na Options não precisa importar nada.
<template>
<h2>Product</h2>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter(); // esse é para redirecionar
router.push('/about');
</script>Veja que importei o useRoute e useRouter, o que eu vou usar para redirecionar é o useRouter, depois é só chamar o método push, onde posso passar tanto a URI como o nome da rota, no exemplo acima chamei a URI '/about' e para redirecionar para o nome é só passar um objeto para o push com a propriedade name.
<template>
<h2>Product</h2>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
router.push({name:'create'});
</script>Não esquecendo de criar a rota com o name 'create'.
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Create from '../views/Create.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/create',
name: 'create', // name aqui
component: Create
}
]
});E olha só que legal, eu posso também passar parâmetros no redirecionamento.
<template>
<h2>Product</h2>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
router.push({name:'create', params:{id:12}});
</script>Agora no componente Create posso pegar o(s) parâmetros(s) assim:
const route = useRoute();
console.log(route.params.id);Se eu quiser usar um objeto no push mas chamando a URI(path), eu posso passar a propriedade path
<template>
<h2>Product</h2>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
router.push({path:'/create', params:{id:12}}); // path chama a uri
</script>Para ficar mais fácil de lembrar essa parte de redirecionar com um objeto, pensa no seguinte, nas rotas eu posso passar o path e o name, então para redirecionar posso usar tanto o path como o name, olha só.
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Create from '../views/Create.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/create', // path aqui, posso redirecionar usando o path
name: 'create', // name aqui, posso redirecionar usando o name
component: Create
}
]
});E para redirecionar usando a Options API é só usar o this.$router.push().
Pronto, é assim que se redireciona no Vue 3.
Se quiser conhecer meu trabalho mais a fundo, visite meu canal no YouTube e veja meus cursos completos clicando nos links abaixo.
🔥Canal no YouTube: Ir para o canal no YouTube
🔥Veja meus cursos disponíveis: Ir para a lista de cursos
0 Comments