今天就做了一个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>

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. UVALive-3523 Knights of the Round Table （双连通分量+二分图匹配）

    题目大意:有n个骑士要在圆桌上开会,但是相互憎恶的两个骑士不能相邻,现在已知骑士们之间的憎恶关系,问有几个骑士一定不能参加会议.参会骑士至少有3个且有奇数个. 题目分析:在可以相邻的骑士之间连一条无向 ...

  2. yii2出现的400错误

    来一段百度来的正常解决方法,注意有很大的坑! 第一种解决办法是关闭Csrf 1配置文件关闭 2控制器里面关闭 public function init(){ $this->enableCsrfV ...

  3. 网络编程之socketserver初识

    网络编程之socketserver初识 Server #!/usr/bin/env python # @Author : "Wjl" # @Date : 2017/12/22 # ...

  4. ubuntu安装amd/ati显卡驱动

    原网页: http://forum.ubuntu.org.cn/viewtopic.php?f=126&t=390372 整合了几个帖子,大概如此:用以下命令卸载所有驱动: 代码: sudo ...

  5. 深入理解java泛型

    一. 什么是泛型? 泛 型(Generic type 或者 generics)是对 简单的理解,就是对类型的参数化,比如我们定义一个类属性或者实例属性时,往往要指定具体的类型,如Integer.Per ...

  6. eureka-3-常用注解

    @EnableDiscoveryClient @EnableEurekaClient 上面两个注解都是用在应用的启动类上面,声明这是一个Eureka Client ,现在说明两个注解的区别. spri ...

  7. 数据库连接池----Druid配置详解

    什么是连接池? 数据库连接池出现的原因在数据库连接资源的低效管理,使用数据库连接池是基于设计模式中的资源池的概念,从而解决资源频繁是分配.释放所造成的问题. 数据库连接池的基本思想就是为数据库连接建立 ...

  8. python编程（最简单的rpc代码）

    [ 声明:版权所有,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 采用twisted可以编写最简单的rpc代码. server端代码如下, from twiste ...

  9. Android 你可能忽略的提高敲代码效率的方式

    Android 你可能忽略的提高敲代码效率的方式

  10. 解决visual studio2017没有系统类和方法注释的问题

    好几次碰到这种情况了,每次都得稍微查一查才能解决这个问题,相信也有不少人遇到这个问题,在对方法还不是很熟练的时候,将鼠标放置到方法上去,就会有信息提示是一件非常方便的事情,本文的解决方法同样适用于只显 ...