这次给大家带来怎样实现组件相互跳转，实现组件相互跳转的注意事项有哪些，下面就是实战案例，一起来看一下。
通过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:`
这是我的登录页面
<router-link to="/myRegister">注册</router-link> ` /*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:`
这是我的登录页面
<router-link to="/myRegister">注册</router-link> ` /*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" } })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
以上就是怎样实现组件相互跳转的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772119.html
