Vue使用routerLinke定义参数的时候 路由规则中不需要更改任何属性。
路由其实就是我们在html中定义的锚点，点击这个连接跳转一个锚点。vue中的路由也是这个原理，
前提是路由必须创建在实例之前。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div class="app"> <h1>{{msg}}</h1> <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 --> <router-link to="log?user=duwei&pass=123456">登录</router-link> <router-link to="zhuce">注册</router-link> <router-view></router-view> </div> <script> var log={ template:'<h1>登录界面------{{$route.query.user}}</h1>', created() { // 组件的生命周期钩子函数 // console.log(this.$route) // console.log(this.$route.query.id) // 这里的this指向的是vm实例对象 console.log(this.$route.query.user); }, } var zhuce={ template:"<h1>注册界面</h1>" } var router= new VueRouter({ routes:[ {path:"/log",component:log}, {path:"/zhuce",component:zhuce}, {path:'/',redirect:'/zhuce'} //当进入界面的时候，默认显示注册界面，redirect 是string类型的 ], }) var vm=new Vue({ el:'.app', data:{ msg:'sdfsdfsdf' }, router:router }) </script> </body> </html>
路由规则中定义参数2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div class="app"> <h1>{{msg}}</h1> <!-- 如果在路由中，参数传递值的时候，需要修改path中的属性值 --> <router-link to="/log/duwei/123456">登录</router-link> <router-link to="/zhuce">注册</router-link> <router-view></router-view> </div> <script> var log={ template:'<h1>登录界面------{{$route.params.user}}----{{$route.params.id}}</h1>', created() { // 组件的生命周期钩子函数 // console.log(this.$route) // console.log(this.$route.query.id) // 这里的this指向的是vm实例对象 console.log(this.$route.params.user); }, } var zhuce={ template:"<h1>注册界面</h1>" } var router= new VueRouter({ routes:[ // /:user和/:pass 相当与占位符 {path:"/log/:user/:id",component:log}, {path:"/zhuce",component:zhuce}, {path:'/',redirect:'/zhuce'} //当进入界面的时候，默认显示注册界面，redirect 是string类型的 ], }) var vm=new Vue({ el:'.app', data:{ msg:'sdfsdfsdf' }, router:router })