1. 今天就做了一个vue-router的实例,(路由跳转,参数的传递[一个参数,多个参数])
    <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="../vue.js"></script>
  7.    <script src="../vue_router.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <p>
          //传递一个参数
  12. <router-link to="/user/foo">/user/foo</router-link> <br>
  13. <router-link to="/user/foo/git/3333">/user/foo/git</router-link> <br>
  14. <router-link to="/user/foo/profile">/user/foo/profile</router-link> <br>
  15. <router-link to="/user/foo/getObj/65">by path</router-link> <br>
  16. //传递多个 参数(通过路由 的名字进行路由的跳转)
  17. <router-link :to="{name:'getObjs',params:{age:'53',name:'刘德华'}}">/user/foo(by name)</router-link>
  18.   </p>
  19.      <router-view></router-view>
  20.     </div>
  21. </body>
  22. </html>
  23. <script>
  24. const User = {
  25. template: `
  26. <div class="user">
  27. <h2>User----- {{ $route.params.age}}</h2>
  28. <router-view></router-view>
  29. </div>`
  30. }
  31. const UserHome = { template: '<div>{{$route.params.id}}-----username</div>' }
  32. const UserProfile = { template: '<div>Profile</div>' }
  33. const UserPosts = { template: '<div>Posts</div>' }
  34. const getObj={
  35. methods:{
  36. getName:function(){
  37. alert(this.$route.params.age);
  38. }
  39. },
    //在模板中通过$route.params.参数名,就可以访问你传递的参数
  40. template:'<div> <span>{{$route.params.name}}</span> <button @click="getName">点击获取年龄</button></div>',
  41. }
  42. const router = new VueRouter({
  43. routes: [
  44. { path: '/user/foo', component: User,
  45. children: [
  46. // UserHome will be rendered inside User's <router-view>
  47. // when /user/:id is matched
  48. { path: 'git/:id', component: UserHome },//接收传递的参数
  49.  
  50. // UserProfile will be rendered inside User's <router-view>
  51. // when /user/:id/profile is matched
  52. { path: 'profile', component: UserProfile },
  53.  
  54. // UserPosts will be rendered inside User's <router-view>
  55. // when /user/:id/posts is matched
  56. { path: 'posts', component: UserPosts },
  57.  
  58. {path:'getObj/:age',component:getObj},
  59.  
  60. {path:'getobj',component:getObj,name:'getObjs'}//路由的名字
  61. ]
  62. }
  63. ]
  64. })
  65.  
  66. const app = new Vue({ router }).$mount('#app')
  67.  
  68. </script>

vue的路由初识01的更多相关文章

  1. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  2. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  3. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  4. vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  5. vue的路由映射问题

    遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...

  6. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  8. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

随机推荐

  1. Nginx启动/重启失败

    解决方案: Nginx启动或重启失败,一般是因为配置文件出错了,我们可以使用nginx -t方法查看配置文件出错的地方.也可以通过查看Nginx日志文件定位到Nginx重启失败的原因,Nginx日志文 ...

  2. Ansible 小手册系列 十八(Lookup 插件)

    file:获取文件内容 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...

  3. jps、jstack、jmap、jhat、jstat、hprof使用详解

    https://my.oschina.net/feichexia/blog/196575#comment-list A. jps(Java Virtual Machine Process Status ...

  4. Oracle recovery manager failed to restore

    解决办法: 1:清理过期失效的备份, 2:增加recovery_file_dest_size参数值即可: SQL> show parameter db_recover NAME          ...

  5. SSH服务:packet_write_wait: Connection to 67.218.143.160 port 22: Broken pipe错误处理

    1.在~/.ssh/config配置文件中添加 IPQoS lowdelay throughput 2.在/etc/ssh/ssh_config配置文件中添加 IPQoS lowdelay throu ...

  6. 转一个有意思的利用存储过程备份恢复PostgreSQL

    [转自 housonglin1213 的博客]http://blog.csdn.net/housonglin1213/article/details/51005540 1.自定义函数脚本备份 CREA ...

  7. Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法

    这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩. 这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有mo ...

  8. 熟悉linux命令

    <鸟哥的linux私房菜>这本书终于看到了敲命令行这块了,有点小激动,打开虚拟机,开始~~~敲!!! 登录界面,用户名密码~~~ 登录成功,下面开始熟悉一下,linux的常见命令了: li ...

  9. java中遍历类中的属性、调用getter&setter方法

    public static void testReflect(Object model) throws NoSuchMethodException, IllegalAccessException, I ...

  10. MySQL笔记之多表

    貌似很久不写博客了,趁着项目刚完结,记录一下这段时间了解到的一些认识,或许有些地方理解的还不够到位,看到的希望能不吝赐教. 外键 概念 与索引的关系 写法 查询 一对多多对一查询 多对多查询 插入 多 ...