Vue-Router来实现组件间跳转的三种方法
2017-11-07 10:49
1151 查看
通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下
提供了3种方式实现跳转:
①直接修改地址栏中的路由地址
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1> </div> ` }) var testRegister = Vue.component("register",{ template:` <div> <h1>这是我的注册页面</h1> </div> ` }) //配置路由词典 //对象数组 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" } }) </script> </body> </html>
②通过router-link实现跳转
<router-link to="/myRegister">注册</router-link>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1><router-link to="/myRegister">注册</router-link></div> ` /*to后面是路由地址*/ }) var testRegister = Vue.component("register",{ template:` <div> <h1>这是我的注册页面</h1> </div> ` }) //配置路由词典 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" } }) </script> </body> </html>
③通过js的编程的方式
jumpToLogin: function () { this.$router.push('/myLogin'); }
代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1><router-link to="/myRegister">注册</router-link></div> ` /*to后面是路由地址*/ }) var testRegister = Vue.component("register",{ methods:{ jumpToLogin:function(){ this.$router.push('/myLogin'); } }, template:` <div> <h1>这是我的注册页面</h1> <button @click="jumpToLogin">注册完成,去登录</button> </div> ` }) //配置路由词典 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" } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vuejs第九篇之组件作用域及props数据传递实例详解
- vue如何引用其他组件(css和js)
- vue-dialog的弹出层组件
- 详解vue2父组件传递props异步数据到子组件的问题
- Vue2实现组件props双向绑定
- Vue.js每天必学之组件与组件间的通信
- Vuejs第十篇之vuejs父子组件通信
- Vue.js 递归组件实现树形菜单(实例分享)
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- 详解用vue编写弹出框组件
- Vue.js路由组件vue-router使用方法详解
- vue组件 $children,$refs,$parent的使用详解
- Vue.js组件tree实现无限级树形菜单
- vue.js表格组件开发的实例详解
- Vue.js组件tabs实现选项卡切换效果
- 详解vuex 中的 state 在组件中如何监听
- vue2组件实现懒加载浅析
- Vue组件大全包括(UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)
相关文章推荐
- vue-router实现组件间的跳转(参数传递)
- Asp.net中实现页面跳转的三种方法比较
- PHP实现前端页面跳转三种实现方法
- Vue-Router实现页面正在加载特效方法示例
- vue组件传递对象中实现单向绑定的方法
- PHP页面跳转三种实现方法
- Asp实现页面跳转有三种方法
- vue-router实现登录和跳转到指定页面,vue-router 传参
- React Js Router 静态方法跳转 直接点到组件
- Vue.js实战之利用vue-router实现跳转页面
- 如何实现域名A指向域名B?三种域名跳转方法供选择
- vue中页面跳转拦截器的实现方法
- VueRouter&Bootstrap实现导航跳转
- 利用Vue实现移动端图片轮播组件的方法实例
- vue2.0父子组件间通信的实现方法
- asp.net实现页面跳转的三种方法评测
- Vue.js路由组件vue-router使用方法详解
- java:ajax实现无跳转刷新的三种方法
- react-router实现跳转传值的方法示例
- 在子视图中实现调用控制器里面的跳转方法这里介绍三种方法