Cómo implementar hacer clic en un botón en el componente vue-router para saltar a un nuevo componente

Simplemente modifique la dirección de ruta en la barra de direcciones directamente:

lt;!doctype htmlgt;

lt;htmlgt;

lt ;headgt;

lt;meta charset="UTF-8"gt;

lt;titlegt;lt;/titlegt;

lt;script src= "js/vue.js"gt;lt;/scriptgt;

lt;!--Archivo de introducción--gt;

lt;script src="js/vue-router .js"gt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div id="contenedor"gt;

lt;pgt;{{msg}}lt;/pgt;

lt;!--Especifique el contenedor para contener el componente a través de router-view--gt;

lt;router-viewgt;lt;/router-viewgt;

lt;/divgt;

lt;scriptgt;

var testLogin = Vue.component("iniciar sesión", {

template:`

lt;divgt;

lt;h1gt;Esta es mi página de inicio de sesiónlt;/ h1gt ;

lt;/divgt;

`

})

var testRegister = Vue.component("registro", {

template:`

lt;divgt;

lt;h1gt;Esta es mi página de registrolt;/h1gt;

lt;/ divgt;

`

})

//Configurar diccionario de enrutamiento

//Matriz de objetos

const ?myRoutes =[

//Cuando la dirección de enrutamiento: la ruta en la barra de direcciones es el componente de acceso myLogin

//El componente se usa como etiqueta, por lo que no se puede usar directamente Se usa después del componente

//Se requiere valor de retorno

//ruta: ''La barra de direcciones especificada está vacía: la página de inicio de sesión predeterminada es

{ ruta:' ', componente: testLogin},

{ruta: '/myLogin', componente: testLogin},

{ruta: '/myRegister', componente: testRegister}

]

const myRouter = new VueRouter({

//myRoutes se puede reemplazar directamente con la matriz anterior

rutas: myRoutes

})

nuevo Vue({

enrutador: myRouter,

//o:

/*

enrutador: nuevo VueRouter({

rutas: [

{ruta: '/myLogin', componente: testLogin},

{camino:' /

myRegister', componente: testRegister}

]

})

*/

el: "#container",

datos: {

msg: "Hola VueJs"

}

})

lt;/scriptgt;

lt;/bodygt;

lt;/htmlgt;

1 Saltar a través del enlace del enrutador

lt;enlace del enrutador a. ="/myRegister"gt;Registerlt;/router-linkgt;

lt;!doctype htmlgt;

lt;htmlgt;

lt; headgt;

lt;meta charset="UTF-8"gt;

lt;titlegt;lt;/titlegt;

lt;script src=" js/vue .js"gt；lt;/scriptgt;

lt;!--Archivo de introducción--gt;

lt;script src="js/vue-router js"gt. ;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div id="contenedor"gt;

lt;pgt;{{msg}}lt;/pgt;

lt;!--Especifique el contenedor para contener el componente a través de router-view--gt;

lt;router-viewgt;lt;/router-viewgt;

lt;/divgt;

lt;scriptgt;

var testLogin = Vue .component ("iniciar sesión", {

template:`

lt;divgt;

lt;h1gt;Esta es mi página de inicio de sesiónlt;/h1gt ;

lt;router-link to="/myRegister"gt;Registerlt;/router-linkgt;

lt;/divgt;

`

/*to va seguido de la dirección de enrutamiento*/

})

var testRegister = Vue.component("register", {

plantilla:`

lt;divgt;

lt;h1gt;Esta es mi página de registrolt;/h1gt;

lt;/divgt;

lt;h1gt;

lt;h1gt;

`

})

//Configurar diccionario de enrutamiento

const ?myRoutes =[

{ruta:' ', componente: testLogin},

{ruta: '/myLogin', componente: testLogin},

{ruta: '/myRegister', componente: testRegister}

]

const myRouter = new VueRouter({

rutas: myRoutes

})

nuevo Vue({

ruta

r: myRouter,

el: "#container",

datos: {

msg: "Hola VueJs"

}

})

lt;/scriptgt;

lt;/bodygt;

lt;/htmlgt;

2. A través de programación js

jumpToLogin: function () {

this.$router.push('/myLogin');

}

lt;!doctype htmlgt;

lt;htmlgt;

lt;headgt;

lt;meta charset="UTF- 8"gt ;

lt;titlegt;lt;/titlegt;

lt;script src="js/vue.js"gt;lt;/scriptgt;

lt;!--Archivo de introducción--gt;

lt;script src="js/vue-router.js"gt;lt;/scriptgt;

lt ;/headgt ;

lt;bodygt;

lt;div id="contenedor"gt;

lt;pgt;{{msg}}lt;

lt;!--Especifique el contenedor para contener el componente a través de router-view--gt;

lt;router-viewgt;lt;/router-viewgt;

lt;/divgt;

lt;scriptgt;

var testLogin = Vue.component("iniciar sesión", {

plantilla: `

lt;divgt;

lt;h1gt;Esta es mi página de inicio de sesiónlt;/h1gt;

lt;router-link to="/ myRegister"gt; Registerlt;/router-linkgt;

lt;/divgt;

`

/*to va seguido de la dirección de enrutamiento*/

})

var testRegister = Vue.component("register", {

métodos: {

jumpToLogin: function(){

this.$router.push('/myLogin');

}

},

plantilla:`

lt;divgt;

lt;h1gt;Esta es mi página de registrolt;/h1gt;

lt;button @click="jumpToLogin"gt;Registro completado, Ir a iniciar sesión lt; /buttongt;

lt;/divgt;

`

})

//Configurar diccionario de enrutamiento

const ?myRoutes =[

{ruta: '', componente: testLogin},

{ruta: '/myLogin', componente: testLogin},

p>

{ruta:'/miRegistro',componente

t: testRegister}

]

const myRouter = new VueRouter({

rutas: myRoutes

})

nuevo Vue({

enrutador: myRouter,

el: "#container",

datos: {

msg: "Hola VueJs"

}

})

lt;/scriptgt;

lt;/bodygt;

lt;/htmlgt;