路由传参 -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 ...
随机推荐
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- ./configure配置的参数 交叉编译 host,build target的含义
交叉编译 host,build target的含义:build就是你正在使用的机器,host就是你编译好的程序可以运行的平台,target就是你编译的程序可以处理的平台.这个 build和host比较 ...
- CSS:盒子的定位与浮动
CSS--盒子定位.浮动与居中 HTML中的每个元素都是一个盒子 浏览器对HTML文档进行解析,根据盒子的属性对其进行排列. 每个元素默认使用标准文档流定位 标准文档流:是指浏览器读取HTML ...
- (一)C++入门——指针与数组——Expression: _CrtIsValidHeapPointer(Block)
最近在入门c++,在看<c++ Primer Plus>一书.书中P106提到,删除使用New创建的数组时,是将指针重新指到第一个元素后,再进行的删除操作.代码如下: int *ptest ...
- 解决Spring Boot集成Shiro,配置类使用Autowired无法注入Bean问题
如题,最近使用spring boot集成shiro,在shiroFilter要使用数据库动态给URL赋权限的时候,发现 @Autowired 注入的bean都是null,无法注入mapper.搜了半天 ...
- 使用python操作kafka
使用python操作kafka目前比较常用的库是kafka-python库 安装kafka-python pip3 install kafka-python 生产者 producer_test.py ...
- Java-this关键词
this关键词 1,this调用本类属性 在程序里面是有this可以实现以下三类的结构的描述: ·当前类中的属性:this.属性: ·当前类中的方法(普通方法.构造方法):this().this.方法 ...
- http请求204
项目中发现一个奇怪的问题,请求的时候同一个接口有两个请求,而且有一个状态为204,有一个为200 在网上查看资料后得知,是因为跨域而引起的,OPTIONS是一种“预检请求”,浏览器在处理跨域访问的请求 ...
- 电脑连手机调试app
小米6也真是坑,打开开发者模式的方式堪称一流绝密!!! 设置 --> 我的设备 --> 全部参数 --> MIUI版本 --> 连续点击七次,直到提示已经处于开发者模式为止 然 ...
- jsp引入文件时候经常遇到的${ctx}
jsp引入文件时候经常遇到的${ctx} 在jsp页面中经常见到这样的代码: <script type="text/JavaScript" src="${ctx}/ ...