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. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...

  2. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

  3. [case49]聊聊flink的checkpoint配置

    序 本文主要研究下flink的checkpoint配置 实例 StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecut ...

  4. 阿里云 EMAS HTTPDNS 联合函数计算重磅推出 SDNS 服务，三大能力获得突破

    1. 什么是 HTTPDNS ? 传统的 DNS(Domain Name System)使开发者常面临着域名劫持.调度不精准的问题. HTTPDNS 使用 HTTP 协议替换常用的 UDP 协议,完成 ...

  5. nginx简介 （转）

    1.Nginx概述 2.Nginx安装与控制指令 3.Nginx如何工作 4.Nginx配置实例 4.1如何配置Linux下Nginx 4.1.1配置Nginx代理HTTP请求到Tomcat 4.1. ...

  6. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结 本系列文章中可能有很多翻译有问题或者错误的地方:并且有些章节 ...

  7. 中国境内PE\VC\投资公司名单

    中国境内PE\VC\投资公司名单 1.青云创投 2.高盛 3.红杉资本 4.鼎晖创投 5.枫丹国际 6.派杰投资银行 7.凯雷投资 8.长安私人资本 9.格林雷斯 10.汉能资本 11.启明创投 12 ...

  8. 洛谷 P2568 GCD（莫比乌斯反演）

    题意:$\sum_{i=1}^{n}\sum_{j=1}^{n}[gcd(i,j)\epsilon prime]$. 对于这类题一般就是枚举gcd,可得: =$\sum_{d\epsilon prim ...

  9. oracle loader

    控制文件的格式    load data    infile '数据文件名'    into table 表名    (first_name position(01:14) char,     sur ...

  10. docker保存容器的修改

    docker保存容器修改 通过在容器中运行某一个命令,可以把对容器的修改保存下来, 这样下次可以从保存后的最新状态运行该容器.docker中保存状态的过程称之为committing, 它保存的新旧状态 ...