vue路由设置路由参数有2种方式：

1.通过query配置：

  1. <router-link :to="{ name:'login',query:{id:1} }">登录</router-link>

通过query配置的路径显示如下：

2.通过params配置：

  1. <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>

通过query配置的路径显示如下：

通过该方法配置的参数，需要在配置路由的时候给参数留个坑，如下图：

 获取路由参数的方法：

1.通过query配置的：

  1. this.$route.query

2.通过params配置的：

  1. this.$route.params

相关代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>路由参数</title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13.     <div id="app">
  14.     </div>
  15.     <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
  16.     <script src="js/vue-router.js"></script>
  17.     <script>
  18.         var Login = {
  19.             template:`<div>我是登录页面</div>`,
  20.             created() {
  21.                 console.log(this.$route.query)
  22.             },
  23.  
  24.         }
  25.  
  26.         var Register = {
  27.             template:`<div>我是注册页面</div>`,
  28.             created() {
  29.                 console.log(this.$route.params)
  30.             },
  31.         }
  32.  
  33.         Vue.use(VueRouter);
  34.  
  35.         var router = new VueRouter({
  36.             routes:[
  37.                 {name:'login',path:'/login',component:Login},
  38.                 //通过params传递的路由参数需要用 :参数名 来占个坑
  39.                 {name:'register',path:'/register/:name',component:Register}
  40.             ]
  41.         });
  42.  
  43.         var App = {
  44.             template:`
  45.                 <div>
  46.                     <router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
  47.                     <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
  48.                     <router-view></router-view>
  49.                 </div>
  50.             `
  51.         }
  52.  
  53.         var vm = new Vue({
  54.             el: '#app',
  55.             router:router,
  56.             components: {
  57.                 app:App
  58.             },
  59.             template:`<app></app>`
  60.         });
  61.     </script>
  62.  
  63. </body>
  64.  
  65. </html>

补充说明：

$route:路由信息对象，只读对象；

$router:路由操作对象 ，只写对象。

Vue路由获取路由参数的更多相关文章

  1. vue项目获取地址栏参数（非路由传参）

    在项目中,遇到一个需求,就是另一个系统直接跳转到我们项目中的某个页面,不需要做用户的校验直接单纯的跳转新页面,再初始化查询数据,参数以地址栏的形式传入 由于原来项目做过权限控制,所以在路由那边需要进行 ...

  2. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  3. vue获取路由中的值

    vue中获取路由中的值 在vue中如何获取路由中的值呢?大家先看下面这段代码: this.$route.params && this.$route.params.id 这行代码就是在v ...

  4. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  5. vue获取浏览器地址栏参数(?及/)路由+非路由实现方式

    1.? 参数 浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...

  6. vue项目获取当前地址栏参数（非路由传参）

    项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...

  7. vue获取路由地址栏url里面的指定参数

    this.$route.query.gid     //gid是获取指定参数的名字

  8. Vue 路由规则--传参数

    1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

随机推荐

  1. 设计模式-观察者模式(Observer Pattern)

    观察者模式(Observer Pattern):定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使他们能够自动更新自己. 观察者 ...

  2. MySQL创建用户与授权方法实例精讲

    MySQL中创建用户与授权的实现方法. 运行环境:widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host ...

  3. WCF推送

    http://www.cnblogs.com/server126/archive/2011/08/11/2134942.html

  4. Vue2 原理解析

    现代主流框架均使用一种数据=>视图的方式,隐藏了繁琐的dom操作,采用了声明式编程(Declarative Programming)替代了过去的类jquery的命令式编程(Imperative ...

  5. 注册vue组件的几种方式

    1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...

  6. Quantum Computation and Quantum Information

    https://www.amazon.com/Quantum-Computation-Information-10th-Anniversary/dp/1107002176/ref=asap_bc?ie ...

  7. 【DIOCP开源项目】实际应用案例

    案例1 DIOCP是Delphi下进行IOCP服务端通讯开发的一个非常好的开源框架,稳定.高效并且使用起来十分简单. 自己两个多月之前因为需要使用Delphi开发一个TCP服务端,当时也是到处爬文,希 ...

  8. HBase最佳实践-用好你的操作系统

    终于又切回HBase模式了,之前一段时间因为工作的原因了解接触了一段时间大数据生态的很多其他组件(诸如Parquet.Carbondata.Hive.SparkSQL.TPC-DS/TPC-H等),虽 ...

  9. js实现裁剪头像上传编辑器

    插件: 1.富头像上传编辑器是一款支持本地上传.预览.视频拍照和网络加载的flash头像编辑上传插件,可缩放.裁剪.旋转.定位和调色等. http://www.fullavatareditor.com ...

  10. 对Inductive Bias（归纳偏置）的理解

    参考资料: https://en.wikipedia.org/wiki/Inductive_bias http://blog.sina.com.cn/s/blog_616684a90100emkd.h ...