Me gustaría hacer una redirección Vue.js
similar al Javascript de vainilla
window.location.href = 'some_url'
¿Cómo podría lograr esto en Vue.js?
Me gustaría hacer una redirección Vue.js
similar al Javascript de vainilla
window.location.href = 'some_url'
¿Cómo podría lograr esto en Vue.js?
Respuestas:
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.
Uncaught ReferenceError: router is not defined
error, ¿Cómo inyectar el enrutador en el componente?
this.$router.push('routename)
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')
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.
Cuando está dentro de una etiqueta de script de componente, puede usar el enrutador y hacer algo como esto
this.$router.push('/url-path')
Solo una ruta simple y muerta:
this.$router.push('Home');
puede probar esto también ...
router.push({ name: 'myRoute' })
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
.
`/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 } }"
Si alguien quiere una redirección permanente de una página /a
a 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"),
},
]
Entonces, lo que estaba buscando era solo dónde poner window.location.href
y 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 ...
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.