首页 > 代码库 > vue的路由初识01
vue的路由初识01
今天就做了一个vue-router的实例,(路由跳转,参数的传递[一个参数,多个参数])
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=http://www.mamicode.com/"../vue.js"></script> <script src=http://www.mamicode.com/"../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> const User = { 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。