路由規則的傳參方式2
阿新 • • 發佈：2019-03-02
init methods 路由規則 utf-8 查詢 ini login htm device
<!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>
<!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性 --> <router-link to="/login/12/ls">登錄</router-link> <router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
var login = { template: ‘<h1>登錄 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>‘, data(){ return { msg: ‘123‘ } }, created(){ // 組件的生命周期鉤子函數 console.log(this.$route.params.id) } }
var router = new VueRouter({ routes: [ { path: ‘/login/:id/:name‘, component: login }, { path: ‘/register‘, component: register } ] })
// 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ‘#app‘, data: {}, methods: {}, // router: router router }); </script> </body>
</html>
<!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>
<!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性 --> <router-link to="/login/12/ls">登錄</router-link> <router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
var login = { template: ‘<h1>登錄 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>‘, data(){ return { msg: ‘123‘ } }, created(){ // 組件的生命周期鉤子函數 console.log(this.$route.params.id) } }
var router = new VueRouter({ routes: [ { path: ‘/login/:id/:name‘, component: login }, { path: ‘/register‘, component: register } ] })
// 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ‘#app‘, data: {}, methods: {}, // router: router router }); </script> </body>
</html>
路由規則的傳參方式2