vue 通过按钮使用组件跳转页面_Vue-Router实现组件间跳转的三种方法

通过VueRouter来实现组件之间的跳转，供大家参考，具体内容如下

提供了3种方式实现跳转：

①直接修改地址栏中的路由地址

{{msg}}

var testLogin = Vue.component("login",{

template:`

这是我的登录页面

`

})

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

template:`

这是我的注册页面

`

})

//配置路由词典

//对象数组

const myRoutes =[

//当路由地址：地址栏中的那个路径是myLogin访问组件

//组件是作为标签来用的所以不能直接在component后面使用

//要用返回值

//path:''指定地址栏为空：默认为Login页面

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

//myRoutes可以直接用上面的数组替换

routes:myRoutes

})

new Vue({

router:myRouter,

//或者：

/*

router:new VueRouter({

routes:[

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

})

*/

el:"#container",

data:{

msg:"Hello VueJs"

}

})

②通过router-link实现跳转

注册

{{msg}}

var testLogin = Vue.component("login",{

template:`

这是我的登录页面

注册

`

/*to后面是路由地址*/

})

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

template:`

这是我的注册页面

`

})

//配置路由词典

const myRoutes =[

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter,

el:"#container",

data:{

msg:"Hello VueJs"

}

})

③通过js的编程的方式

jumpToLogin: function () {

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

}

代码

{{msg}}

var testLogin = Vue.component("login",{

template:`

这是我的登录页面

注册

`

/*to后面是路由地址*/

})

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

methods:{

jumpToLogin:function(){

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

}

},

template:`

这是我的注册页面

注册完成,去登录

`

})

//配置路由词典

const myRoutes =[

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter,

el:"#container",

data:{

msg:"Hello VueJs"

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。