标签：col logs utf-8 containe 方式 src view 实现 对象
三、通过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‘);
}
四、通过VueRouter来实现组件之间的跳转：参数的传递
login ---用户名 --->main
①明确发送方和接收方
②配置接收方的路由地址
{path:‘/myTest‘,component:TestComponent}
-->
{path:‘/myTest/:id‘,component:TestComponent}
③接收方获取传递来的数据
this.$route.params.id
④跳转的时候，发送参数
this.$router.push(‘/myTest/20‘)
<router-link :to="‘/myTest‘+id">跳转</router-link>
标签：col logs utf-8 containe 方式 src view 实现 对象
原文地址：http://www.cnblogs.com/wangruifang/p/7774071.html
