vue的路由初識01
阿新 • • 發佈：2017-07-23
color body emp ont doctype ams match -s utf-8
今天就做了一個vue-router的實例，（路由跳轉，參數的傳遞[一個參數，多個參數]）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue.js"></script> <script src="../vue_router.js"></script> </head> <body> <div id="app"> <p>
//傳遞一個參數 <router-link to="/user/foo">/user/foo</router-link> <br> <router-link to="/user/foo/git/3333">/user/foo/git</router-link> <br> <router-link to="/user/foo/profile">/user/foo/profile</router-link> <br> <router-link to="/user/foo/getObj/65">by path</router-link> <br> //傳遞多個 參數（通過路由 的名字進行路由的跳轉） <router-link :to="{name:‘getObjs‘,params:{age:‘53‘,name:‘劉德華‘}}">/user/foo(by name)</router-link> </p> <router-view></router-view> </div> </body> </html> <script> constUser = { template: ` <div class="user"> <h2>User----- {{ $route.params.age}}</h2> <router-view></router-view> </div>` } const UserHome = { template: ‘<div>{{$route.params.id}}-----username</div>‘ } const UserProfile = { template: ‘<div>Profile</div>‘ } const UserPosts = { template: ‘<div>Posts</div>‘ } const getObj={ methods:{ getName:function(){ alert(this.$route.params.age); } },
//在模板中通過$route.params.參數名，就可以訪問你傳遞的參數 template:‘<div> <span>{{$route.params.name}}</span> <button @click="getName">點擊獲取年齡</button></div>‘, } const router = new VueRouter({ routes: [ { path: ‘/user/foo‘, component: User, children: [ // UserHome will be rendered inside User‘s <router-view> // when /user/:id is matched { path: ‘git/:id‘, component: UserHome },//接收傳遞的參數 // UserProfile will be rendered inside User‘s <router-view> // when /user/:id/profile is matched { path: ‘profile‘, component: UserProfile }, // UserPosts will be rendered inside User‘s <router-view> // when /user/:id/posts is matched { path: ‘posts‘, component: UserPosts }, {path:‘getObj/:age‘,component:getObj}, {path:‘getobj‘,component:getObj,name:‘getObjs‘}//路由的名字 ] } ] }) const app = new Vue({ router }).$mount(‘#app‘) </script>
vue的路由初識01