<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-router</title> </head> <body> <div id="app"> <!-- a href=# v-link="{path:'login'}">登录</a> <a href=# v-link="{path:'register'}">注册</a> --> <!-- --><!--version vue .0占位--> <!-- vue --> <router-link to="/login">login</router-link> <router-link to="/register">register</router-link> <router-view></router-view> </div> <link rel="stylesheet" href="./dist/css/bootstrap.css"> <script src="vue.js"></script> <script src="vue-router.js"></script> <script src="vue-resource1.5.1.js"></script> <script type="text/javascript"> //开始路由代码的编写 var App= Vue.extend({}); // var login=Vue.extend({ // tempate:'<h1>登录页面</h1>' // }); // var register=Vue.extend({ // tempate:'<h1>注册页面</h1>', // data(){ // return{ // id:1, // uname:'', // upwd:'' // } // }, // created:function(){ // this.id=this.$route.params.id; // } // }); const login={ template:'<h1>this is login {{ $route.params.msg }}</h1>', data(){ return{ msg:'参数传递' } } }; const register={ template:'<h1>this is register {{ $route.params.uname}}-{{ $route.params.upwd}}</h1>', data(){ return{ uname:'用户名', upwd:'用户密码' } } }; //设置路由规则 //vue version 1.0 //var router =new VueRouter(); // router.map({ // 'login':{component:login}, // 'register/:uname/:upwd':{component:register} // }); //开启路由 // router.start(App) //默认跳转到 login // router.redirect('/':'/login'); //传参 //vue version 2 routes=[ {path:'/login/:msg',component:login}, {path:'/register/:uname/:upwd',component:register} ] var router =new VueRouter({routes}); // router.redirect('/':'login'); const app=new Vue({ router }).$mount('#app'); </script> </body> </html>