1，query方法去获取参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="./lib/vue-2.4.0.js"></script>
  10.   <script src="./lib/vue-router-3.0.1.js"></script>
  11. </head>
  12.  
  13. <body>
  14.   <div id="app">
  15.     <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
  16.     <router-link to="/login?id=10&name=zs">登录</router-link>
  17.     <router-link to="/register?abc=123">注册</router-link>
  18.     <router-view></router-view>
  19.   </div>
  20.  
  21.   <script>
  22.  
  23.     var login = {
  24.       template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
  25.       data(){
  26.         return {
  27.           msg: '123'
  28.         }
  29.       },
  30.       created(){ // 组件的生命周期钩子函数
  31.         console.log(this.$route)
  32.         //这里用query去获取路由传来的参数 注意要带上
  33.         console.log(this.$route.query.id)
  34.         console.log(this.$route.query.name)
  35.       }
  36.     }
  37.  
  38.     var register = {
  39.       template: '<h1>注册</h1>',
  40.       created(){
  41.         console.log(this.$route.query.abc)
  42.       }
  43.     }
  44.  
  45.     var router = new VueRouter({
  46.       routes: [
  47.         { path: '/login', component: login },
  48.         { path: '/register', component: register }
  49.       ]
  50.     })
  51.  
  52.     // 创建 Vue 实例，得到 ViewModel
  53.     var vm = new Vue({
  54.       el: '#app',
  55.       data: {},
  56.       methods: {},
  57.       // 属性名跟属性值一样 只需要写一个名称
  58.       // router: router
  59.       router
  60.     });
  61.   </script>
  62. </body>
  63.  
  64. </html>

2，params的方法去获取参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="./lib/vue-2.4.0.js"></script>
  10.   <script src="./lib/vue-router-3.0.1.js"></script>
  11. </head>
  12.  
  13. <body>
  14.   <div id="app">
  15.  
  16.     <!-- 如果在路由中，根据路由的规则的参数去传参 -->
  17.     <router-link to="/login/12/ls">登录</router-link>
  18.     <router-link to="/register/我是参数">注册</router-link>
  19.  
  20.     <router-view></router-view>
  21.  
  22.   </div>
  23.  
  24.   <script>
  25.  
  26.     var login = {
  27.       template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
  28.       data(){
  29.         return {
  30.           msg: '123'
  31.         }
  32.       },
  33.       created(){ // 组件的生命周期钩子函数
  34.       // 用params去获取参数
  35.         console.log(this.$route.params.id)
  36.       }
  37.     }
  38.  
  39.     var register = {
  40.       template: '<h1>注册 --{{ $route.params.a}}</h1>',
  41.       created(){ // 组件的生命周期钩子函数
  42.       // 用params去获取参数
  43.         console.log(this.$route.params.a)
  44.       }
  45.     }
  46.  
  47.     var router = new VueRouter({
  48.       routes: [
  49.         // 在路由规则中用 :形参 去设置传值的参数
  50.         { path: '/login/:id/:name', component: login },
  51.         { path: '/register/:a', component: register }
  52.       ]
  53.     })
  54.  
  55.     // 创建 Vue 实例，得到 ViewModel
  56.     var vm = new Vue({
  57.       el: '#app',
  58.       data: {},
  59.       methods: {},
  60.       // router: router
  61.       router
  62.     });
  63.   </script>
  64. </body>
  65.  
  66. </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. 2018-8-10-C#-快速释放内存的大数组

    title author date CreateTime categories C# 快速释放内存的大数组 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17 ...

  2. JSP Web第八章整理复习 过滤器

    P269  Filter过滤器的基本原理 P269  Filter过滤器体系结构 原理和体系结构看懂了就行 P270 例8-1过滤器代码与配置文件 略

  3. 跨域知识（二）——JSONP

    JSONP是服务器与客户端跨源通信的常用方法.最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小. 它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据, ...

  4. Sublime text2 常用插件

    很早就安装了这款软件,因为听说很NB.但是一直都是习惯用vim, 所以一直没有去学习它, 现在用用感觉确实很不错,所以找了些插件, 参考网址: http://www.hphq.net/Marketin ...

  5. 自学FPGA笔记之 “sublime的使用”

    之前用的notepad++,现在新发现一款软件:sublime.调出一整个逻辑块,写代码能快一点,而且常见的always之类的词汇还不易输入错误,并且比较不容易漏掉begin  end.现在总结一下自 ...

  6. laravel 图片上传 intervention/image

    1. composer require intervention/image 2). 修改 app/config/app.php 添加 ServiceProvider: // 将下面代码添加到 pro ...

  7. 在Eclipse中添加Tomcat

    在Eclipse中开发web或开启web服务需要Tomcat的支持,在添加Tomcat之前要清楚你的Eclipse版本,如果你的Eclipse是javvEE版的就可以直接安装Tomcat,如果不是就需 ...

  8. 六.基本数据结构-双端队列（Deque）

    一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...

  9. Directx11教程(18) D3D11管线(7)

    原文:Directx11教程(18) D3D11管线(7) 光栅化阶段(RS)之后,将进入PS/OM阶段. 参考外文资料:http://fgiesen.wordpress.com/2011/07/01 ...

  10. python 定义子类