一、$router和$route的区别
$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象
例子:
//$router操作 路由跳转
this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })
//$route读取 路由参数接收
var name = this.$route.params.name;
二、路由跳转方式name 、 path 和传参方式params 、query的区别
path 和 Name路由跳转方式,都可以用query传参
例子:
//Router.js
{
path: '/hello',
name: 'HelloWorld',
component: helloPage
}
跳转方式name
this.$router.push({
name: 'HelloWorld',
query: {
id: 12345
}
})
跳转方式path
this.$router.push({
path: '/hello',
query: {
id: 12345
}
})
//获取路由参数信息方式:
{{$route.query.id}
path路由跳转方式,params传参会被忽略,只能用name命名的方式跳转
params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
注意:params传参如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
-
准备阶段-maven项目构建
依据我现阶段对maven的了解,具使用POM管理项目和强大的repository资源管理库支持. 在项目建立初期,对网站的可拓展.高并发.易于管理做了评估.最终使用Maven 管理该项目 . 如下是m ...
-
JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
-
HDU - Travel
Problem Description Jack likes to travel around the world, but he doesn’t like to wait. Now, he is t ...
-
sql查找字符串是否包含字符
SELECT [Fgoodsid] ,[Fgoodsname] ,[Fcinema] ,[Fprice] FROM [tenpaytest].[dbo].[goodsinfo]where Fgoods ...
-
(poj)3414 Pots (输出路径的广搜)
Description You are given two pots, having the volume of A and B liters respectively. The following ...
-
使用tensorflow搭建自己的验证码识别系统
目录 准备验证码数据 保存为tfrecords文件 验证码训练 学习tensorflow有一段时间了,想做点东西来练一下手.为了更有意思点,下面将搭建一个简单的验证码识别系统. 准备验证码数据 下面将 ...
-
SIP协议搭建电信级VOIP/IM运营平台--架构篇(sip集群)
移动互联网的发展为整个VOIP通信行业开拓了新的战场,一时间各类即时通信软件如雨后春筝般冒了出来,再一次创造了移动互联网的发展神话.SIP协议做为音视频通信的首选标准,应用也越来越广泛. ------ ...
-
kubernetes 一个服务的基本组成
1. service Service是kubernetes最核心的概念,通过创建Service,可以为一组具有相同功能的容器应用提供一个统一的入口地址,并且将请求进行负载分发到后端的各个容器应用上 k ...
-
javaweb防止表单重复提交
参考孤傲苍狼 https://www.cnblogs.com/xdp-gacl/p/3859416.html 场景一:在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交 场景二:表 ...
-
jquery.peity.js简介
jQuery简单图表peity.js <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...