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. Android网络功能之会话发起协议SIP

    原文:http://android.eoe.cn/topic/android_sdk * 会话发起协议* Android提供了一个支持会话发起协议(SIP)的API,这可以让你添加基于SIP的网络电话 ...

  2. Win7/Win8.1右键菜单技巧：应用程序任意加

    对于Win7.Win8.1老用户来说,日常使用中离不开双击各类第三方应用程序,尤其是常用的记事本.QQ聊天.关机.一键截图等程序,这时我们不妨将这些“右键菜单”,轻松实现一键开启QQ.截图或者关机等功 ...

  3. Fluent UDF【2】：学习途径

    要怎样做才能做到无畏惧编写任何UDF程序?估计很多与UDF打交道的人都会问到这个问题. 面对UDF文档中那众多的宏描述,小伙伴们是不是感觉到茫然无措,不知从何入手.有时候读别人写好的程序感觉并不难,然 ...

  4. spark join

    https://jaceklaskowski.gitbooks.io/mastering-apache-spark/content/spark-sql-joins.html https://acadg ...

  5. [AWS vs Azure] 云计算里AWS和Azure的探究(4)

    云计算里AWS和Azure的探究(4) ——Amazon EC2 和 Windows Azure Virtual Machine 接下来我们来看看Azure VM的创建.Azure里面虚拟机的创建跟A ...

  6. Python 使用pymysql连接MySQL

    由于 MySQLdb 模块还不支持 Python3.x,所以 Python3.x 如果想连接MySQL需要安装 pymysql 模块. pymysql 模块可以通过 pip 安装.但如果你使用的是 p ...

  7. 每日英语：Booming Tech Sector Redraws the Map

    China's high-tech companies have made their mark on the nation's economy. Now, with growing cash and ...

  8. 每日英语：The Most Destructive, Unpredictable Force in Tech

    What's the most destructive force in the tech world, the thing that has nearly killed BlackBerry, pu ...

  9. linux命令(45)：去掉 所有文件中的空行

    方法一:利用grep grep -v '^\s*$' test.txt 注:-v表示将匹配的结果进行反转,正则表达式匹配空行.(空行可包括空格符制表符等空白字符) 方法二:利用sed sed '/^\ ...

  10. 开发openfire 消息拦截器插件PacketInterceptor

    开发消息拦截器的步骤跟开发简单插件步骤一样,要开发消息拦截器插件,首先继承PacketInterceptor包拦截类,然后在initializelPlugin()方法中注册拦截器,就可以实现inter ...