路由传参 -vue
参数接收
param参数 => /: => 接收参数:this.$route.params.id
query参数 => ? => 接收参数:this.$route.query.id
还有一种 meta值
路由复用
场景:当从Product/1 跳转到 Product/2 时,原来的组件实例被复用,两个路由渲染的是用一个组件,这时组件的生命周期钩子不会被二次加载;
export default {
created() {
获取参数
}
}
这里的获取参数将不会改变,相对路由参数做出变化:
export default {
watch: {
'$router' (to ,from) {
//对路由变化做出响应
}
}
}
传递参数
由于query与params传参机制不一样,造成的差异,如果要隐藏参数用params,如果强制刷新不被清除用query
通过$router中name配置:
this.$router.push({
name: 'ProductList',
query:{
CategoryID: CategoryID
}
})
路由器配置name
问号?
this.$router.push({
path: `/ProductList?CategoryID=${id}`
})
this.$router.push({
path: `/ProductList`,
query: {
CategoryID: CategoryID
}
}) <router-link v-for="item in CategoryList" v-if="item.Level === 1" :key="item.id" :to="`/ProductList?CategoryID=${item.id}`">
通过路由器配置:
export default new Router({
routes: [
{
path: '/Product/:id',
name: 'Product',
component: Product
}
]
})
1)
<router-link :to="`/Product/${item.ID}`" v-for="item in ProductList">{{ item.ProductName }}</router-link>
<router-link :to="`{name:'Product',params:${item.ID}}`" v-for="item in ProductList">{{ item.ProductName }}</router-link>
2)
this.$router.push({
path: `/ProductList/${CategoryID}`
})
路由传参 -vue的更多相关文章
- Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
- vue链接传参与路由传参
1.链接传参: 例如:链接是:http://localhost:3333/#/index?id=001 我们要获取参数:console.log(this.$route.query.id):即可 2.路 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块
路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
随机推荐
- 安装OpenCV:OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置
1.下载和安装OpenCV SDK VS2010不用说,肯定都安装了吧.来说说当前最新的OpenCV版本2.4.8(2014年2月24日),2.4.9 (2014年4月)的下载和安装.与其说是 ...
- python列表的切片与复制
切片,即处理一个完整列表中部分数据. 语法 变量[起始索引:终止索引:步长] 首先创建一个字符串列表 >>> cars = ['toyota', 'honda', 'mazda', ...
- 批量删除redis的数据
批量删除redis的数据 # redis-cli -h 192.168.1.17 -p 6379 keys "xiaolang_*"|xargs redis-cli -h 192. ...
- IDEA连接 Oracle数据库
package com.zxx.util;import org.apache.commons.dbutils.DbUtils;import java.sql.Connection;import jav ...
- idea配置glassFish
FIile ---> settings ---> 查找Application Server .. 点击加号,, 点击glassFish Server.. 找到glassFish存放路径 点 ...
- Linux系列(7):入门之磁盘与文件系统管理
1.磁盘的主要概念 下面展示一下磁盘结构图: 1.磁道 2.柱面 3.物理扇区 已经了解了这么多概念,现在总结一下 4.磁盘分区 1.概念 磁盘分区就是将磁盘划分成不同的区域. 2.分区的最小单位 早 ...
- Spring Cloud Feign接口返回流
身无彩凤双飞翼,心有灵犀一点通. 服务提供者 @GetMapping("/{id}") public void queryJobInfoLogDetail(@PathVariabl ...
- GCD and LCM HDU - 4497(质因数分解)
Problem Description Given two positive integers G and L, could you tell me how many solutions of (x, ...
- Stardew Valley(星露谷物语)Mod开发之路 写在前面
之前迷上了一款新游戏Stardew Valley,这几天发现游戏为插件开发提供了SMAPI编程接口,玩家可以方便的自定义游戏内容(瞬间感觉因缺思厅,额..),其实这几年的游戏许多都有mod机制,商家机 ...
- [Jenkins]初次访问Jenkins,输入密码后,页面卡在空白界面一直未加载出内容_解决方案
问题描述 安装Jenkins,初次访问Jenkins(http://localhost:8002,端口号根据各自设置而不同,本例是8002),输入Jenkins初始化的管理密码之后,浏览器中一直卡在空 ...