路由传参 -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 ...
随机推荐
- redis 发布订阅、geo、bitmap、hyperloglog
1.发布订阅 简介 发布订阅类似于广播功能.redis发布订阅包括 发布者.订阅者.Channel 命令 命令 作用 时间复杂度 subscribe channel 订阅一个频道 O(n) unsub ...
- 【LOJ】#3120. 「CTS2019 | CTSC2019」珍珠
LOJ3120 52pts \(N - D >= 2M\)或者\(M = 0\)那么就是\(D^{N}\) 只和数字的奇偶性有关,如果有k个奇数,那么必须满足\(N - k >= 2M\) ...
- Spring4学习回顾之路02—IOC&DI
IOC&DI介绍 ●IOC:(Inversion of Control) :控制反转(反向获取资源) 其思想是反转资源获取的方向.传统的资源上查找方式要求组件向容器发起请求查找资源,作为回应, ...
- charindex函数的用法
例一: CustomName包含客户的First Name和Last Name,它们之间被一个空格隔开.我们用CHARINDX函数确定两个名字中间空格的位置.通过这个方法,我们可以分析ContactN ...
- [转载]aspnet webapi 跨域请求 405错误
写了个webapi给同事用ajax调用,配置完跨域以后get请求完全没问题,post就一直报405错误,花了半天时间就是解决不了,后来在网上看到一博主的帖子才知道原来是webapi 默认的web.co ...
- GTA4 EFLC cheat code
GTA4 EFLC cheat code 提示警告:您的图像设置接近或超出您的系统推荐资源限制,为了使游戏运行更加流畅推荐你降低你的图像设置. 在游戏目录新建名为 commandline的txt文本文 ...
- CentOS6.8安装Python3.6.3
1.linux下安装python3 准备编译环境(环境如果不对的话,可能遇到各种问题,比如wget无法下载https链接的文件) yum install zlib-devel bzip2-devel ...
- JS基础_质数练习的改进,提高程序执行效率
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- BZOJ4887可乐题解--矩阵运算
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4887 分析 话说这道题经常见到类似模型来计数算期望,概率啊,然而我太蒻了都不会做,今天看 ...
- Spark 源码和应用开发环境的构建
引言 Spark 现在无疑是大数据领域最热门的技术之一,读者很容易搜索到介绍如何应用 Spark 技术的文章,但是作为开发人员,在了解了应用的概念之后,更习惯的是打开开发环境,开发一些应用来更深入的学 ...