参数接收

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的更多相关文章

  1. Vue 踩坑日志 - 有关路由传参的坑

    1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...

  2. vue链接传参与路由传参

    1.链接传参: 例如:链接是:http://localhost:3333/#/index?id=001 我们要获取参数:console.log(this.$route.query.id):即可 2.路 ...

  3. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  4. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  5. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

  6. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  7. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  8. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  9. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

随机推荐

  1. 安装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月)的下载和安装.与其说是 ...

  2. python列表的切片与复制

    切片,即处理一个完整列表中部分数据. 语法 变量[起始索引:终止索引:步长] 首先创建一个字符串列表 >>> cars = ['toyota', 'honda', 'mazda', ...

  3. 批量删除redis的数据

    批量删除redis的数据 # redis-cli -h 192.168.1.17 -p 6379 keys "xiaolang_*"|xargs redis-cli -h 192. ...

  4. IDEA连接 Oracle数据库

    package com.zxx.util;import org.apache.commons.dbutils.DbUtils;import java.sql.Connection;import jav ...

  5. idea配置glassFish

    FIile ---> settings ---> 查找Application Server .. 点击加号,, 点击glassFish Server.. 找到glassFish存放路径 点 ...

  6. Linux系列(7):入门之磁盘与文件系统管理

    1.磁盘的主要概念 下面展示一下磁盘结构图: 1.磁道 2.柱面 3.物理扇区 已经了解了这么多概念,现在总结一下 4.磁盘分区 1.概念 磁盘分区就是将磁盘划分成不同的区域. 2.分区的最小单位 早 ...

  7. Spring Cloud Feign接口返回流

    身无彩凤双飞翼,心有灵犀一点通. 服务提供者 @GetMapping("/{id}") public void queryJobInfoLogDetail(@PathVariabl ...

  8. GCD and LCM HDU - 4497(质因数分解)

    Problem Description Given two positive integers G and L, could you tell me how many solutions of (x, ...

  9. Stardew Valley(星露谷物语)Mod开发之路 写在前面

    之前迷上了一款新游戏Stardew Valley,这几天发现游戏为插件开发提供了SMAPI编程接口,玩家可以方便的自定义游戏内容(瞬间感觉因缺思厅,额..),其实这几年的游戏许多都有mod机制,商家机 ...

  10. [Jenkins]初次访问Jenkins,输入密码后,页面卡在空白界面一直未加载出内容_解决方案

    问题描述 安装Jenkins,初次访问Jenkins(http://localhost:8002,端口号根据各自设置而不同,本例是8002),输入Jenkins初始化的管理密码之后,浏览器中一直卡在空 ...