首页 > 代码库 > 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