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

1.通过query配置：

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

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

2.通过params配置：

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

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

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

 获取路由参数的方法：

1.通过query配置的：

this.$route.query

2.通过params配置的：

this.$route.params

相关代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <title>路由参数</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var Login = {

            template:`<div>我是登录页面</div>`,

            created() {

                console.log(this.$route.query)

            },

        }

        var Register = {

            template:`<div>我是注册页面</div>`,

            created() {

                console.log(this.$route.params)

            },

        }

        Vue.use(VueRouter);

        var router = new VueRouter({

            routes:[

                {name:'login',path:'/login',component:Login},

                //通过params传递的路由参数需要用 :参数名 来占个坑

                {name:'register',path:'/register/:name',component:Register}

            ]

        });

        var App = {

            template:`

                <div>

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

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

                    <router-view></router-view>

                </div>

            `

        }

        var vm = new Vue({

            el: '#app',

            router:router,

            components: {

                app:App

            },

            template:`<app></app>`

        });

    </script>

</body>

</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. grafana 的面板设置

    1.工作中我们会计算连个字段的四则运算

  2. MySQL与Oracle的区别之我见

    1. 大的方面(宏观) Oracle为商用数据库,行业中占据相当的地位:市场占比2012年为40%.开发.管理资源相当丰富,有自己的metalink,我也曾用过,有什么问题,都能在那里得到较快速度的解 ...

  3. MSSQL分组取后每一组的最新一条记录

    数据库中二张表,用户表和奖金记录表,奖金记录表中一个用户有多条信息,有一个生效时间,现在要查询: 奖金生效时间在三天前,每个用户取最新一条奖金记录,且用户末锁定 以前用的方法是直接写在C#代码中的: ...

  4. Vue 常见问题汇总

    Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...

  5. 菜鸟学Java（十九）——WEB项目测试好帮手，Maven+Jetty

    做WEB开发,测试是一件很费时间的事情.所以我们就应该用更简单.更快捷的方式进行测试.今天就向大家介绍一个轻量级的容器——jetty.今天说的etty是Maven的一个插件jetty-maven-pl ...

  6. 使用putty部署远程J2EE环境

    以前没弄过,开个帖子记录一下. 基本上要做的就是安装JDK.安装tomcat.安装sql. 1.安装JDK JDK在本机上,需要传输到远程linux服务器上.为了存放我们上传的文件.打开putty,进 ...

  7. RenderTexture动态创建纹理

    CCRenderTexture,它允许你来动态创建纹理,并且可以在游戏中重用这些纹理. 使用 CCRenderTexture非常简单 – 你只需要做以下5步就行了: 创建一个新的CCRenderTex ...

  8. 深入源码分析Java线程池的实现原理

    程序的运行,其本质上,是对系统资源(CPU.内存.磁盘.网络等等)的使用.如何高效的使用这些资源是我们编程优化演进的一个方向.今天说的线程池就是一种对CPU利用的优化手段. 通过学习线程池原理,明白所 ...

  9. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  10. 2015-06学习总结——c++

    在工作快三年的时候,突然想到我需要凝练下自身的知识体系.从大一开始接触c++,差不多快8年了.想想过去走过的学习之路,很简单,也很曲折. 经历了从一无所知——入门——应用——修修补补的过程,到现在可以 ...