【www.bbyears.com--组件控件开发】
通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下
提供了3种方式实现跳转:
①直接修改地址栏中的路由地址
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script> {{msg}}
<script> 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" } }) </script>
②通过router-link实现跳转
注册
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script> {{msg}}
<script> 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" } }) </script>
③通过js的编程的方式
jumpToLogin: function () { this.$router.push("/myLogin"); }
代码
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script> {{msg}}
<script> 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" } }) </script>