zoukankan      html  css  js  c++  java
  • vue的路由初识01

    今天就做了一个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> 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>
  • 相关阅读:
    20034 #917
    loj3066
    P5391
    Hive on spark和Hive on mr在处理orc格式表格时数据不一致问题探究
    解决自定义Spark的jar包提交到yarn上使用cluster模式执行时报错keberos用户找不到问题
    三个文件教你写一个命令行终端[electron实战]
    按钮点击防止双击
    uniapp-base64加密解密(不会中文乱码)
    Android Studio 2021.3.1 阿里云盘分享地址
    Oracle——创建多个实例(数据库)、切换实例、登录数据库实例
  • 原文地址:https://www.cnblogs.com/evaling/p/7224194.html
Copyright © 2011-2022 走看看