Vue-router的传参方式和router使用技巧
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使用技巧的更多相关文章
- vue的传参方式和router使用技巧
vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- 每日技术总结:vue router传参方式,js获取设备高度
今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
- vue-router query和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...
- vue的三种传参方式
<template> <div> <router-link :to="{'name':'x',params:{'type':'users'}}"> ...
- 18 vue 动态路由传参
params形式 http://192.168.1.100:8080/#/infoDetailed/231 //定义路由{ path: "/infoDetailed/:newsId" ...
随机推荐
- JS getBoundingClientRect()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用win10的开始屏幕,在系统中设置简洁、快捷桌面
前几天入手了一个本本,由于之前电脑使用的柠檬桌面软件和现在本本的分辨率不适应,意外发现win10自带的开始屏幕整理桌面也是很有意思,再加上触摸板的手势,瞬间觉得整个电脑都清洁许多.废话少说,开始上料. ...
- IntelliJ IDEA 和 Pycharm 破解
关键网址:http://idea.lanyus.com/ 步骤: 1. 在http://idea.lanyus.com/上下载:JetbrainsCrack-2.9-release-enc.jar . ...
- 廖雪峰 JavaScript 学习笔记(函数)
JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函 ...
- 从Scratch到Python——Python生成二维码
# Python利用pyqrcode模块生成二维码 import pyqrcode import sys number = pyqrcode.create('从Scratch到Python--Pyth ...
- 小程序配置tabbar
app.json中添加tabbar "tabBar": { "color": "#a9b7b7", //未选中字体颜色 "sele ...
- DAY 23 面向对象(二)
一.对象独有的名称空间 在产生对象时就赋初值 class Student: def __init__(self,name,sex): self.name = name self.sex = sex # ...
- Ketlle
public class Kettle { private int volume; public Kettle(int water) { volume =water; System.out.pri ...
- 【Intellij Idea】Intellij Idea 光标问题即默认改写模式以及部分快捷键失效
一.出现原因: 是因为Intellij Idea安装了IdeaVim插件 二.解决办法: 把ideavim 这个插件停了或卸了,就可以了
- cowboy源码分析(二)
接 cowboy源码分析(一) 下面我们重点看看cowboy_protocol.erl代码 -module(cowboy_protocol). %% API. -export([start_link/ ...