Vue.js redirección a otra página


Respuestas:


187

Si está usando vue-router, debe usar router.go(path)para navegar a cualquier ruta en particular. Se puede acceder al enrutador desde un componente mediante this.$router.

De lo contrario, window.location.href = 'some url';funciona bien para aplicaciones que no son de una sola página.

EDITAR : router.go()cambiado en VueJS 2.0. Puede usar router.push({ name: "yourroutename"})o justo router.push("yourroutename")ahora para redirigir.

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


2
En mi caso, el uso es dirigir a otra página que no sea de una sola página
Jimmy Obonyo Abor

8
Estaba recibiendo: Uncaught ReferenceError: router is not definederror, ¿Cómo inyectar el enrutador en el componente?
Saurabh

@felipekm qué? ¿No es eso lo mismo?
Barry D.

3
router.push ("yourroutename") NO es lo mismo que router.push ({name: "yourroutename"). El primero define la ruta directamente. El segundo toma la ruta con el nombre especificado.
pinki

8
this.$router.push('routename)
ka_lin

84

Según los documentos, router.push parece ser el método preferido:

Para navegar a una URL diferente, use router.push. Este método empuja una nueva entrada en la pila del historial, por lo que cuando el usuario hace clic en el botón de retroceso del navegador, será llevado a la URL anterior.

fuente: https://router.vuejs.org/en/essentials/navigation.html

FYI: Webpack y configuración de componentes, aplicación de una sola página (donde importa el enrutador a través de Main.js), tuve que llamar a las funciones del enrutador diciendo:

this.$router

Ejemplo: si desea redirigir a una ruta llamada "Inicio" después de que se cumpla una condición:

this.$router.push('Home') 

1
Esta pregunta no tiene nada que ver con la compilación (paquete web).
Jimmy Obonyo Abor

12
Gracias por el voto negativo, a pesar de que la mayoría de las personas se desarrollarán con vue cli, webpack, enrutador y store / vuex y es probable que se encuentren con el problema de no poder llamar al enrutador.
Dave Sottimano

1
@JimmyObonyoAbor hiyo comentar en un voto negativo utasema unamlipa jaja
Cholowao

@Cholowao he he he, sawa tushasikia! Tengo una reacción Kazi, hazme ping si tienes habilidades ...
Jimmy Obonyo Abor

1
@JimmyObonyoAbor
Cholowao

41

Solo usa:

window.location.href = "http://siwei.me"

No use vue-router, de lo contrario será redirigido a " http://yoursite.com/#!/http://siwei.me "

mi entorno: nodo 6.2.1, vue 1.0.21, Ubuntu.


1
No veo ninguna razón, ¿por qué esto debería estar entre comillas dobles?
Moritz

1
En realidad, standardjs dice "Use comillas simples para cadenas excepto para evitar escapar".
Moritz

esto fue hace algún tiempo, pero en realidad lo resolví usando comillas simples, pero supongo que las comillas dobles también deberían funcionar y podrían ser útiles en enlaces complejos.
Jimmy Obonyo Abor

Verifique la versión vue primero. en la versión anterior, tal vez a vue no le importa la convención de código. Sin embargo, en mi entorno, la convención de código provocará un error de compilación (de es6 compilado a vanilla js). Si no ha utilizado el módulo de nodo 'ES6', tal vez estará bien.
Siwei Shen 申思维

¿Qué pasa si desea abrirlo en una nueva pestaña?
Fthi.a.Abadi

29

Cuando está dentro de una etiqueta de script de componente, puede usar el enrutador y hacer algo como esto

this.$router.push('/url-path')

Gracias hombre, simple y directo.
Espíritu de solución



6

si quieres ir a otra página this.$router.push({path: '/pagename'})

si quieres enrutar con params this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})


5
window.location = url;

'url' es la url web que desea redirigir.


3

También puede usar el v-bind directamente a la plantilla como ...

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

la :es la abreviatura de v-bind.


También puede usar la sintaxis de ES6:: href = " `/path-to-route/${IdVariable}`" O la ruta nombrada como se hace referencia aquí ( router.vuejs.org/guide/essentials/named-routes.html ): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
mEnE

1

Si alguien quiere una redirección permanente de una página /aa otra/b


Podemos usar la redirect:opción agregada en el router.js. Por ejemplo, si queremos redirigir a los usuarios siempre a una página separada cuando escribe la URL raíz o 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

Entonces, lo que estaba buscando era solo dónde poner window.location.hrefy la conclusión a la que llegué fue que la mejor y más rápida forma de redirigir es en las rutas (de esa manera, no esperamos que se cargue nada antes de redirigir).

Me gusta esto:

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

Quizás ayude a alguien ...


0

Para mantenerse en línea con su solicitud original:

window.location.href = 'some_url'

Puedes hacer algo como esto:

<div @click="this.window.location='some_url'">
</div>

Tenga en cuenta que esto no aprovecha el uso del enrutador de Vue, pero si desea "hacer una redirección en Vue.js similar al Javascript de vainilla", esto funcionaría.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.