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 })