vue路由传多个参数_vue路由传参（两种方法总结）

vue传递参数有多种，据我了解、熟悉的其中两种总结如下：

一、组件通过query来传递flag参数为1，相当与在 url 地址后面拼接参数例如：localhost:8080/house?flag=1。具体实例如下：

首页

点击

house.vue页面如下取值：

测试路由传参{{ this.$route.query.flag}}

此种方法通俗，明了，但是缺点是参数直接展示在了请求的url里面，一般可以传递一些标识或者不重要的参数。对于需要保密的一些参数，此种方法不适合。

二、router.push(...)，该方法直接将参数存入了路由当中，不会在url地址栏展示。

例如：localhost:8080/house

实例如下：

this.$router.push({name:'house',params:{flag:1}});

house为脚手架中定义的路由name值。

如下

routes: [ { path: '/'house, name: 'house', component: house }]

页面取值如下：

页面展示：{{this.$route.params.flag}}

钩子函数取值：

mounted : function() {

alert("我是html页面传递过来的参数：----------------------------"+this.$route.params.flag);

}

此种方法不会将参数展示到url里面，比较安全，个人建议传递参数多使用第二种方式。

三、关于传递参数无效的一个实例：

Params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

例如：

this.$router.push({name:'/house',params:{flag:1}});

上面的name为具体跳转的html页面路径，如果不需要携带参数，此处页面也可以跳转成功，若是携带falg参数，则此处会跳转，但参数不会传递成功。

注：此处的name中只能通过路由配置的name属性访问--------------------------------重点

vue路由传多个参数_vue路由传参（两种方法总结）相关推荐

android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
vue-router跳转时打开新页面的两种方法最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...
vue 获取请求url_vue 获取url里参数的两种方法小结
我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query. ...
jquery 乱码传参_jquery获取URL中参数解决中文乱码问题的两种方法
从A页面通过url传参到B页面时,解析url参数可以用下面两种方法: 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(&q ...
linux系添加路由,Linux添加路由的两种方法
Linux中增加软路由的两种方法第一种: route add -net 172.16.6.0 netmask 255.255.255.0 gw 172.16.2.254 dev eth0 /* 增加 ...
Linux中增加软路由的两种方法
Linux中增加软路由的两种方法第一种: route add -net 172.16.6.0 netmask 255.255.255.0 gw 172.16.2.254 dev eth0 /* 增加 ...
路由删除命令_清除思科路由器配置信息的两种方法
对于网络设备来说,清除思科路由器配置信息是防止黑客轻松地连接访问公司网络的最佳方法.在对Cisco路由器进行清理时,有两种不同的方法可供选择,而它们通常用于不同的方面: 一.知道路由器的密码,相关步骤 ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...

vue路由传多个参数_vue路由传参（两种方法总结）

首页

测试路由传参{{ this.$route.query.flag}}

vue路由传多个参数_vue路由传参（两种方法总结）相关推荐

最新文章

热门文章