1，query方法去获取参数

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

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

</head>

<body>

  <div id="app">

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->

    <router-link to="/login?id=10&name=zs">登录</router-link>

    <router-link to="/register?abc=123">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {

      template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',

      data(){

        return {

          msg: '123'

        }

      },

      created(){ // 组件的生命周期钩子函数

        console.log(this.$route)

        //这里用query去获取路由传来的参数 注意要带上

        console.log(this.$route.query.id)

        console.log(this.$route.query.name)

      }

    }

    var register = {

      template: '<h1>注册</h1>',

      created(){

        console.log(this.$route.query.abc)

      }

    }

    var router = new VueRouter({

      routes: [

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

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

      ]

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      // 属性名跟属性值一样 只需要写一个名称

      // router: router

      router

    });

  </script>

</body>

</html>

2，params的方法去获取参数

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

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

</head>

<body>

  <div id="app">

    <!-- 如果在路由中，根据路由的规则的参数去传参 -->

    <router-link to="/login/12/ls">登录</router-link>

    <router-link to="/register/我是参数">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {

      template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',

      data(){

        return {

          msg: '123'

        }

      },

      created(){ // 组件的生命周期钩子函数

      // 用params去获取参数

        console.log(this.$route.params.id)

      }

    }

    var register = {

      template: '<h1>注册 --{{ $route.params.a}}</h1>',

      created(){ // 组件的生命周期钩子函数

      // 用params去获取参数

        console.log(this.$route.params.a)

      }

    }

    var router = new VueRouter({

      routes: [

        // 在路由规则中用 :形参 去设置传值的参数

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

        { path: '/register/:a', component: register }

      ]

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      // router: router

      router

    });

  </script>

</body>

</html>

Vue 路由规则--传参数的更多相关文章

  1. Vue路由规则中定义参数

    Vue使用routerLinke定义参数的时候  路由规则中不需要更改任何属性. 路由其实就是我们在html中定义的锚点,点击这个连接跳转一个锚点.vue中的路由也是这个原理, 前提是路由必须创建在实 ...

  2. vue 路由动态传参 （多个）

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

  3. vue使用resource传参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  5. Vue axios post 传参数，后台接收不到为 null

    由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理. cnmp inst ...

  6. Flask学习 2修改路由规则 传入参数访问url

    #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: flask0 ...

  7. vue 路由 URL传参

    源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...

  8. Vue路由query传参

    1.不要进行过深的嵌套 let id = 'uyu' this.$router.push({ path: '/mrp_detail', query: { re_order_id: id, option ...

  9. MVC之路由规则 (自定义，约束，debug)

    自定义路由规则的要求,小范围写在前,大范围写在后.路由规则可以注册多条,路由规则的名称不能重复路由规则有顺序,并且按照顺序进行匹配,建议小范围写在前,大范围写在后.路由规则可以设置约束 即正则表达式路 ...

随机推荐

  1. LintCode刷题笔记-- BackpackII

    标记: 动态规划 问题描述: Given n items with size Ai, an integer m denotes the size of a backpack. How full you ...

  2. CI框架--浅谈前后台区分

    谈到CI框架,这是我第二个用到的框架,初步使用过后,眼前一亮.CI框架上手简单.模式明确.适合新手学习框架时入手. 下面给大家讲讲CI框架区分前后台文件的具体做法: 首先在application文件夹 ...

  3. 【JZOJ3601】【广州市选2014】Tree(tree)

    ╰(￣▽￣)╭ 每个非叶子节点,其左右子树叶子节点的权值之和相等.我们称这种二叉树叫平衡二叉树. 我们将一棵平衡二叉树叶子节点的权值从左到右列出来,假如这个权值序列是另一个序列A的子序列,我们称这棵平 ...

  4. 在notepad++中tab和空格的区别

    在notepad++中实现tab和空格不通用的问题 方式一: 方式二:

  5. 重磅发布：阿里开源 Open JDK 长期支持版本 Alibaba Dragonwell

    3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell.作为 Java 全球管理组织 Java Community Process ...

  6. windows中Navicat连接centos中的mysql报：1130-Host '192.168.xxx.1' is not allowed to connect to this MySQL解决方法

    解决方法: 在centos中登录mysql输入下面指令: grant all PRIVILEGES on *.* to ' WITH GRANT OPTION;

  7. 开启php中短标签<%%>和<??>的方法

    <?  ?> 短标签,兼容的,PHP默认也不支持,需要在php的配置文件中设置! 去到php.ini中开启下面的 <%  %> ASP风格!也是兼容的,也需要配置:

  8. utf8mb4 使用注意

    数据库的表的定义如果是utf8mb4的富文本时,关联的字段必须指定为非utf8,否则 跟其他的表关联的时候,会非常慢,以至于索引都不能使用. 也就是必须的字段才可以使用这个 utf8mb4 ,否则检索 ...

  9. 【JZOJ4359】【GDKOI2016】魔卡少女

    题目描述 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时一只看上去 ...

  10. 并发编程之submit和execute区别

    前言 使用线程池难免会用到submit和execute,但是submit是有坑的,此处做个记录 1.submit坑 此处随便写一个方法,进入内部查看execute和submit /** * @Auth ...