Gostaria de fazer um redirecionamento Vue.js
semelhante ao javascript de baunilha
window.location.href = 'some_url'
Como eu consegui isso no Vue.js?
Gostaria de fazer um redirecionamento Vue.js
semelhante ao javascript de baunilha
window.location.href = 'some_url'
Como eu consegui isso no Vue.js?
Respostas:
Se você estiver usando vue-router
, você deve router.go(path)
navegar para qualquer rota específica. O roteador pode ser acessado de dentro de um componente usando this.$router
.
Caso contrário, window.location.href = 'some url';
funciona bem para aplicativos que não são de uma única página.
EDIT : router.go()
alterado no VueJS 2.0. Você pode usar router.push({ name: "yourroutename"})
ou router.push("yourroutename")
agora mesmo para redirecionar.
Uncaught ReferenceError: router is not defined
error, Como injetar roteador no componente?
this.$router.push('routename)
De acordo com os documentos, router.push parece o método preferido:
Para navegar para um URL diferente, use router.push. Esse método coloca uma nova entrada na pilha do histórico; portanto, quando o usuário clicar no botão Voltar do navegador, ele será levado para o URL anterior.
fonte: https://router.vuejs.org/en/essentials/navigation.html
FYI: Webpack e configuração de componentes, aplicativo de página única (onde você importa o roteador através do Main.js), tive que chamar as funções do roteador dizendo:
this.$router
Exemplo: se você deseja redirecionar para uma rota chamada "Casa" depois que uma condição é atendida:
this.$router.push('Home')
Apenas use:
window.location.href = "http://siwei.me"
Não use vue-router, caso contrário você será redirecionado para " http://yoursite.com/#!/http://siwei.me "
meu ambiente: nó 6.2.1, vue 1.0.21, Ubuntu.
Quando dentro de uma tag de script de componente, você pode usar o roteador e fazer algo parecido com isto
this.$router.push('/url-path')
Apenas um roteamento simples:
this.$router.push('Home');
pode tentar isso também ...
router.push({ name: 'myRoute' })
Você também pode usar o v-bind diretamente no modelo como ...
<a :href="'/path-to-route/' + IdVariable">
o :
é a abreviatura de v-bind
.
`/path-to-route/${IdVariable}`
" Ou a rota nomeada conforme aqui referida ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
Se alguém quiser redirecionamento permanente de uma página /a
para outra página/b
Podemos usar a redirect:
opção adicionada no router.js
. Por exemplo, se queremos redirecionar os usuários sempre para uma página separada quando ele digita o URL raiz ou base /
:
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
redirect: "/someOtherPage",
name: "home",
component: Home,
// () =>
// import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),
},
]
Então, o que eu estava procurando era apenas onde colocar window.location.href
e a conclusão que cheguei foi que a melhor e mais rápida maneira de redirecionar é nas rotas (dessa forma, não esperamos que nada carregue antes de redirecionar).
Como isso:
routes: [
{
path: "/",
name: "ExampleRoot",
component: exampleComponent,
meta: {
title: "_exampleTitle"
},
beforeEnter: () => {
window.location.href = 'https://www.myurl.io';
}
}]
Talvez isso ajude alguém ..
Para acompanhar a sua solicitação original:
window.location.href = 'some_url'
Você pode fazer algo assim:
<div @click="this.window.location='some_url'">
</div>
Observe que isso não tira proveito do uso do roteador do Vue, mas se você quiser "fazer um redirecionamento no Vue.js semelhante ao javascript vanilla", isso funcionaria.