vue2 router 动态传参,多个参数的实例

这个是用vue-cli生成的项目下使用

比如有个路由跳转时需要带两个参数：

<router-link to='/tr'>查看</router-link>

可以这样写：

 <router-link to='/tr/uid/pid'>查看</router-link>

然后去router.js 中 处理这个路由：

import Vue from 'vue'
import Router from 'vue-router'
import tr from '@/components/tr.vue'
import tab from '@/components/tab.vue'

Vue.use(Router)

export default new Router({
 routes: [

 {
  path:'/tr/:uid/:pid',
  name: 'tr',
  component:tr
 },
 {
  path:'/tab',
  name: 'tab',
  component:tab
 }
 ]
})

需要在router.js 中使用vue-router,具体是在path:'/tr/:uid/:pid', 反斜杠后加冒号，意思是后面就是路由的参数。

然后去对应tr.vue组件中接受这个路由参数：

通过实例的this.$route.params，可访问这个key-value对象，

我们给请求路由赋个值看看：

<router-link to='/tr/15/122'>查看</router-link>

打印如下Object {uid: "15", pid: "122"}

以上这篇vue2 router 动态传参,多个参数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router实现组件间的跳转（参数传递）

    通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &

  • Vue系列：通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

  • vue-router2.0 组件之间传参及获取动态参数的方法

    1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.addre

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • vue2 router 动态传参,多个参数的实例

    这个是用vue-cli生成的项目下使用 比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中 处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo

  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • 解决vue-router中的query动态传参问题

    最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下: 希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=**** <li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">修改</router-

  • vue 中的动态传参和query传参操作

    Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 使用python执行shell脚本 并动态传参 及subprocess的使用详解

    最近工作需求中 有遇到这个情况 在web端获取配置文件内容 及 往shell 脚本中动态传入参数 执行shell脚本这个有多种方法 最后还是选择了subprocess这个python标准库 subprocess这个模块可以非常方便的启动一个子进程,并且控制其输入和输出 Class Popen(args,bufsize = 0,executable=None, stdin =None,stdout =None,stderr =None, preexec_fn = None,close_fds =

  • pyMySQL SQL语句传参问题,单个参数或多个参数说明

    在用pymysql操作数据库的过程中,给sql语句传参碰到了很多问题,网上传参策略很多,这里推荐两种 单个传参用%s,写起来比较简单: field = '-' sql_talk="UPDATE cnp.Test set a='' where b='%s'" cursor.execute(sql_talk % field) db.commit() 多个传参用{0}占位符: field = '-' a = 'code' sql_talk="UPDATE cnp.Test set

  • Docker如何给Springboot项目动态传参的实现方法

    背景 最近有些初学Docker的朋友问到,想通过docker-compose.yml来动态给微服务传参,而不是每次都要在项目配置文件硬编码,然后构建服务镜像,最后打包发布经过一些列流程才能更新配置,那能不能直接通过docker-compose.yml里把一些配置项放到环境变量,然后springboot项目自动从环境变量获取参数呢? 场景 假设现在有一个Springboot项目,它里面有一个数据库的配置项,但是不同的数据库测试环境(DEV\SIT\UAT),数据库ip有多个,想使用同一个Sprin

  • Mybatis order by 动态传参出现的问题及解决方法

    Mybatis order by 动态传参出现的问题及解决方法

    问题由来 一个简单的需求,要求把和当前用户相关的数据置顶展示. 这里,我用了一个简单的用户表来复现这个需求. 很简单,查询语句后面加上:order by t.login_name='wulaoer' desc 就行了. 如下所示,吴老二就到顶了. 那Mybatis脚本怎么写呢? 就这么写

  • springboot通过spel结合aop实现动态传参的案例

    springboot通过spel结合aop实现动态传参的案例

    目录 前言 SpEl表达式简介 实例: SpEl结合AOP动态传参 小结 项目地址 前言 基于SpingBoot框架中, 我们随处可以见的便是各种各样的功能注解, 注解的实现原理AOP之前有说过(翻看本系列的前面几章即可), 这里不过多赘述. 那么, 你有没有碰到这样一种场景: 需要动态的传参数进注解, 注意是动态的而不是写死在代码里的. 针对这种需求, 今天, 我们就来实现一个简单的案例. SpEl表达式简介 正式撸代码之前, 先了解下SpEl (Spring Expression Langu

随机推荐