with vue page link change vue.js url-routing vuejs2 vue-router

vue.js - page - vue router



Vue.js redirección a otra página (10)

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

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

Me gustaría hacer una redirección en Vue.js similar al Javascript de vainilla

window.location.href = ''some_url''

¿Cómo podría lograr esto en Vue.js?


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 Atrás del navegador, será llevado a la URL anterior.

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

FYI: Webpack y configuración de componentes, aplicación de página única (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'')


Si está utilizando vue-router , debe usar router.go(path) para navegar a cualquier ruta en particular. Se puede acceder al enrutador desde un componente utilizando 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 simplemente router.push("yourroutename") ahora para redirigir.

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



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

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

the : es la abreviatura de v-bind .


puede probar esto también ...

router.push({ name: ''myRoute'' })


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

Podemos usar la opción redirect: 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"), }, ]


Solo una ruta simple y muerta:

this.$router.push(''Home'');


<div id="app"> <a :href="path" />Link</a> </div> <script> new Vue({ el: ''#app'', data: { path: ''https://www.google.com/'' } }); </script> enter code here


window.location = url;

''url'' es la url web que desea redirigir.