Redirecionamento do Vue.js para outra página

133

Gostaria de fazer um redirecionamento Vue.jssemelhante ao javascript de baunilha

window.location.href = 'some_url'

Como eu consegui isso no Vue.js?

Jimmy Obonyo Abor
fonte
Você quer dizer um redirecionamento para uma rota definida no vue router '/ my / vuerouter / url'? Ou você redireciona um navegador para some-url.com ?
Hitautodestruct 30/01/19

Respostas:

187

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.

https://router.vuejs.org/guide/essentials/named-routes.html

Jeff
fonte
2
No meu caso, o uso é direcionar para outra página não única
Jimmy Obonyo Abor
8
Eu estava recebendo: Uncaught ReferenceError: router is not definederror, Como injetar roteador no componente?
Saurabh
@felipekm what? Não é a mesma coisa?
Barry D.
3
router.push ("yourroutename") NÃO é o mesmo que router.push ({name: "yourroutename"). O primeiro define a rota diretamente. O segundo segue a rota com o nome especificado.
pinki
8
this.$router.push('routename)
24419 ka_lin
84

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') 
Dave Sottimano
fonte
1
Esta pergunta não tem nada a ver com compilação (webpack).
Jimmy Obonyo Abor
12
Obrigado pelo voto negativo, mesmo que a maioria das pessoas esteja desenvolvendo com o vue cli, webpack, roteador e store / vuex e provavelmente tenha o problema de não conseguir ligar para o roteador.
Dave Sottimano 27/02
1
@JimmyObonyoAbor comentou seu voto negativo em haha
Cholowao
@Cholowao he he he, sawa tushasikia! eu tenho um reagem kazi, pingue-me se você tem habilidades ...
Jimmy Obonyo Abor
1
@JimmyObonyoAbor
Cholowao
41

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.

Siwei Shen 申思维
fonte
1
Não vejo nenhuma razão, por que isso deve estar entre aspas duplas ..?
Moritz
1
Na verdade, o standardjs diz "Use aspas simples para seqüências de caracteres, exceto para evitar escapar".
Moritz
isso foi há algum tempo, mas na verdade eu resolvi isso usando aspas simples, mas acho que aspas duplas também devem funcionar e podem ser úteis em links complexos.
Jimmy Obonyo Abor
verifique a versão vue primeiro. na versão inicial, talvez o vue não se importe com a convenção de código. No entanto, no meu ambiente, a convenção de código causará erro de compilação (de es6 compilado para vanilla js). Se você não tiver usado o módulo de nó 'ES6', talvez esteja ok.
Siwei Shen
e se você deseja abri-lo em uma nova guia?
Fthi.a.Abadi 28/01
29

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')
Njeru Cyrus
fonte
Obrigado cara, simples e direto.
Solution Spirit
8

Apenas um roteamento simples:

this.$router.push('Home');
Mohammad Mahdi KouchakYazdi
fonte
7

pode tentar isso também ...

router.push({ name: 'myRoute' })
Davod Aslanifakor
fonte
6

se você deseja direcionar para outra página this.$router.push({path: '/pagename'})

se você deseja rotear com parâmetros this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})

Bagzie
fonte
5
window.location = url;

'url' é o URL da web que você deseja redirecionar.

Rayees Pk
fonte
3

Você também pode usar o v-bind diretamente no modelo como ...

<a :href="'/path-to-route/' + IdVariable">

o :é a abreviatura de v-bind.

mENE
fonte
Você também pode usar a sintaxe do ES6:: href = " `/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 } }"
mEnE
1

Se alguém quiser redirecionamento permanente de uma página /apara 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"),

    },
   ]
Rakibul Haq
fonte
0
<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here
Yash
fonte
0

Então, o que eu estava procurando era apenas onde colocar window.location.hrefe 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 ..

Marcus
fonte
0

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.

AlmostPitt
fonte