Vue中router兩種傳參方式
阿新 • • 發佈：2018-11-05
Vue中router兩種傳參方式
1.Vue中router使用query傳參
相關Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <script src="../js/vue-resource-1.3.4.js"></script> <!--1.引入vue-router--> <script src="../lib/vue-router-3.0.1.js"></script> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> <style> .myactive { color: red; font-size: 20px; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(140px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <router-link to="/login?id=10&name='zhangsan'">登入</router-link> <router-link to="/register">註冊</router-link> <!--router-view,提供的用來當做佔位符的 router中的規則會展現到這個裡面去--> <transition mode="out-in"> <router-view></router-view> </transition> </div> <script> var login = { template: '<h1>這個是登入元件--- {{$route.query.id}}----{{$route.query.name}} </h1>', data:function () { return { msg:'123' } }, created:function () { console.log(this.$route); } } var register = { template: '<h1>註冊元件</h1>' } //在new var routerObj = new VueRouter({ //這個配置物件中的route表示路由匹配規則的意思 //1.path,表示監聽,路由的連線地址 //2.component 表示路由匹配到的path routes: [ //注意:component屬性值,必須是一個元件模板物件,不能是引用名稱 {path: '/', redirect: '/login'}, {path: '/login', component: login}, {path: '/register', component: register} ], linkActiveClass: 'myactive' }) var vm = new Vue({ el: "#app", data: {}, methods: {}, router: routerObj //將路由規則物件,註冊到vm例項上,用來監聽地址物件 }) </script> </body> </html>
2Vue中router使用params傳參
相關Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <script src="../js/vue-resource-1.3.4.js"></script> <!--1.引入vue-router--> <script src="../lib/vue-router-3.0.1.js"></script> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> <style> .myactive { color: red; font-size: 20px; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(140px); } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } </style> </head> <body> <div id="app"> <router-link to="/login/10">登入</router-link> <router-link to="/register">註冊</router-link> <transition mode="out-in"> <router-view></router-view> </transition> </div> <script> var login = { template: '<h1>這個是登入元件--- {{$route.params.id}} </h1>', data:function () { return { msg:'123' } }, created:function () { console.log(this.$route.params); } } var register = { template: '<h1>註冊元件</h1>' } var routerObj = new VueRouter({ routes: [ {path: '/login/:id', component: login}, {path: '/register', component: register} ], linkActiveClass: 'myactive' }) var vm = new Vue({ el: "#app", data: {}, methods: {}, router: routerObj //將路由規則物件,註冊到vm例項上,用來監聽地址物件 }) </script> </body> </html>