vue传参方法一

1,路由配置

   {
path: '/describe/:id',
name: 'Describe',
component: Describe
}

2,使用方法

//   直接调用$router.push 实现携带参数的跳转
this.$router.push({
// 这个id是一个变量,随便是什么值都可以
path: /describe/${id}`,
})

3,获取方法(在describe页面)

$route.params.id

使用以上方法可以拿到上个页面传过来的id值

vue传参方法二

1,路由配置

  {
path: '/describe',
name: 'Describe',
component: Describe
}

(这个地方默认配置就可以了,不用做任何的处理)

2,使用方法

    this.$router.push({
name: 'Describe',
params: {
id: id
}
})

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

3,获取方法(在describe页面)

$route.params.id

也用params获取就可以了;

vue传参方法三

1,路由配置

 {
path: '/describe',
name: 'Describe',
component: Describe
}

(默认配置)

2,使用方法

   this.$router.push({
path: '/describe',
query: {
id: id
}
})

(params换成了query)

3,获取方法(在describe页面)

$route.query.id

(这个地方用query还获取id,和前面用的params获取的区别在于,用query获取的id值会在url中有显示,可以看到你传过来的值)

props传值方法

父组件

(table-data这个地方可以随便取名字,不是特定的值)

<div class="content">
//这个是一个普通组件,其中tabelData可以是变量,也可以是常量,和pageInfo一样样,这里打算传递两个值过去,其实也可以用对象的方式传过去都是可以的。
<my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</div>

子组件

props: ['tableData', 'pageInfo'],
data() {
return {
tData: this.tableData,
page: this.pageInfo
}
}

prop是单向绑定的,不应该在子组件内部改变prop。不过这里的props传过来的值会随之父组件的值的改变而改变,是动态改变的。

$route使用小技巧

1,$route.path

  • 类型: string

    字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"

2,$route.params

  • 类型: Object

  一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

3,$route.query

  • 类型: Object

    一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

4,$route.hash

  • 类型: string

    当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。

5,$route.fullPath

  • 类型: string

    完成解析后的 URL,包含查询参数和 hash 的完整路径。

Vue-router的传参方式和router使用技巧的更多相关文章

  1. vue的传参方式和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...

  2. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  3. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

  4. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  5. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  6. $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

  7. vue-router query和params传参(接收参数)$router $route的区别

    今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...

  8. vue的三种传参方式

    <template> <div> <router-link :to="{'name':'x',params:{'type':'users'}}"> ...

  9. 18 vue 动态路由传参

    params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...

随机推荐

  1. 线程池如何复用一个线程-- ThreadPoolExecutor的实现(未完)

    任务是一组逻辑工作单元,而线程则是使任务异步执行的机制.在Java中,Runnable对象代表一个任务,Thread对象负责创建一个线程执行这个任务. 前提:1. 程序需要处理大量任务 2. 任务的执 ...

  2. 20175312 2018-2019-2 《Java程序设计》第7周学习总结

    20175312 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第八章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...

  3. 忽略 iconv 转码错误导致输出中断

    在遇到一些特殊字符时候,使用iconv转码会提示报错,导致整段文字输出为空,解决的方法是增加TRANSLIT//IGNORE $str = iconv("UTF-8", " ...

  4. 使用RStudio调试(debug)基础学习(二)和fGarch包中的garchFit函数估计GARCH模型的原理和源码

    一.garchFit函数的参数--------------------------------------------- algorithm a string parameter that deter ...

  5. 报错:keep must be either "first", "last" or False

    data_mac_set = data_mac.drop_duplicates(['std_mac']) 此时会报错:keep must be either "first", &q ...

  6. HBase详解

    1.   hbase简介 1.1.  什么是hbase HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模结构化存储集群. H ...

  7. webpack学习笔记 (二) html-webpack-plugin使用

    这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...

  8. Python 入门小实例笔记

    实例1:打印用户输入的姓名与手机号码知识点:编码,获取输入,变量,标准输出 #encoding=utf-8 import time #1.提示用户输入信息 name = input ("请输 ...

  9. iframe父页面和子页面获取元素和js变量

    父页面获取iframe页面元素和变量 获取方法:$("#id")[0].contentWindow.showInfo(): 获取元素:  $("#id").co ...

  10. erlang的热更新

    erlang作为一个为电信级别而出现的语言,热更新是其最重要的特性之一  热代码升级-Erlang允许程序代码在运行系统中被修改.旧代码能被逐步淘汰而后被新代码替换.在此过渡期间,新旧代码是共存的. ...