Redirecionamento do Vue.js para outra página


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


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') 

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.


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')

Obrigado cara, simples e direto.
Solution Spirit



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})


5
window.location = url;

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


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.


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"),

    },
   ]

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

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 ..


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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.