1、链接传参:

  例如:链接是:http://localhost:3333/#/index?id=001

  我们要获取参数:console.log(this.$route.query.id);即可

2、路由传参:

  (一、显示在url中)

  main.js params传值是通过 :[参数值] 如path: "/home/game/:num"

    例:

{
path: "/home", component: home,
children: [
{ path: "/home/game/:num", component: game }
]
}

  父组件路由跳转写法:

    :to="{path:'/game/'+item.Id}"

  子组件取路由参数:

    通过 this.$route.params.参数名来接受传递过来的值

  (二、不显示在url中):这种方法再刷新页面后参数消失,不建议使用

    只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名。

      

//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向
{
path: "/home", component: home,
children: [
{ name: "game1", path: "/home/game/", component: game }
]
}
]

    home.vue 中router-link修改为:to="{ name:'game1', params: {num: 123} }" params中是要传递的参数,这样传递的参数就不会显示在url中。

  

<template>
<div>
<h3>首页</h3>
<router-link :to="{ name:'game1', params: {num: 123} }">
<button>显示</button>
</router-link>
<router-view></router-view>
</div>
</template>

  

 子组件取路由参数:

      通过 this.$route.params.参数名来接受传递过来的值

vue链接传参与路由传参的更多相关文章

  1. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  2. vue 页面间使用路由传参数,刷新页面后获取不到参数的问题

    情况 情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页 ...

  3. jsp内部传参与重定向传参

    1 重定向地址栏会发生改变,因为它会发送两次请求,内部转发,地址栏不会发生改变,因为它只有一个请求2 重定向不能获取上一次请求中的参数,而内部转换可以3 内部转发可以访问WEB-INF下的资源,重定向 ...

  4. vue路由传参刷新丢失

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

  5. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

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

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

  7. vue 路由传参

      mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由   2.history路由 不会带#的     单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...

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

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

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

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

随机推荐

  1. 在O(n)时间复杂度内找到出现超过一半的数

    #include<iostream> using namespace std; bool solver(const int a[],const int n, int & num) ...

  2. memcache 启动 储存原理 集群

    一. windows下安装启动 首先将memcache的bin目录加入到Path环境变量中,方便后面使用命令: 然后执行 memcached –dinstall 命令安装memcache的服务: 然后 ...

  3. velocity 是如何实现内省 屏蔽反射的

    velocity的标签中支持$abc 这样的语法,如果abc是一个对象,则写模板时就可以利用它来进行反射,调用一些危险的方法,如 $vm.getClass().newInstance() #set ( ...

  4. Vux配置指南

    流程 Vux是Vue.js的一个ui库,官网在这里,官方文档的配置指南侧重于技术的罗列,我这里简化一下Vux的配置流程. 1. 安装vux npm install vux --save 2. 安装le ...

  5. ZED-Board从入门到精通系列(八)——Vivado HLS实现FIR滤波器

    http://www.tuicool.com/articles/eQ7nEn 最终到了HLS部分.HLS是High Level Synthesis的缩写,是一种能够将高级程序设计语言C,C++.Sys ...

  6. 深入了解MyBatis返回值

    深入了解MyBatis返回值 想了解返回值,我们须要了解resultType,resultMap以及接口方法中定义的返回值. 我们先看resultType和resultMap resultType和r ...

  7. Spring学习笔记(三)之装配Bean

    除了组件扫描与自动装配之外还有基于Java代码的装配与基于XML的装配. 有一些场景是我们不能用自动装配的,比如我们要给第三方库中的组件装配到我们的应用中,这时自动装配无效,因为自动装配只能扫描本应用 ...

  8. 在Visual Studio 中开发Office Add-in

    作者:陈希章 发表于2017年7月13日 "Talk is cheap, show me the code",我们就用代码来说话吧.这一篇将给大家介绍如何开始Office Add- ...

  9. 「mysql优化专题」详解引擎(InnoDB,MyISAM)的内存优化攻略?(9)

    注意:以下都是在MySQL目录下的my.ini文件中改写(技术文). 一.InnoDB内存优化 InnoDB用一块内存区域做I/O缓存池,该缓存池不仅用来缓存InnoDB的索引块,而且也用来缓存Inn ...

  10. 《程序员修炼之道:从小工到专家》【PDF】下载

    <程序员修炼之道:从小工到专家>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196340 内容简介 <程序员修炼之道> ...