$router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一、$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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
- python调用tushare的pro_bar通用行情接口
接口名称:pro_bar 更新时间:股票和指数通常在15点-17点之间,数字货币实时更新,具体请参考各接口文档明细. 描述:目前整合了股票(未复权.前复权.后复权).指数.数字货币.ETF基金.期货. ...
- uoj#186 【UR #13】Yist
题目 orz myy 首先注意到答案有单调性,于是我们可以考虑二分一个\(x\),之后去判断一下每次只使用长度为\(x\)的区间能否删出目标序列 显然我们应该贪心地删除需要删除元素中最小的那一个,感性 ...
- vue - blog开发学习3
1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添加到home.vue中的cont ...
- docker运行我们的容器
docker images docker pull nginx 运行 docker images 查看Nginx镜像是否获取成功,若为如下所示即为获取成功: docker run -p 8080:80 ...
- moment.js 快捷查询
格式化日期 当前时间: moment().format('YYYY-MM-DD HH:mm:ss'); //2014-09-24 23:36:09 今天是星期几: moment().format('d ...
- CSS3中的transform转换属性
属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration 持续时间 transition-timing-f ...
- JavaScript_DOM详解
节点操作: 查看对象属性的值obj.getAttribute() 如: //获取图片 var imgs = document.getElementsByTagName("img") ...
- C# 连接Excel,获取表格数据,获取多个sheet中的数据,获取多个sheet名
/// <summary> /// 获取Excel内容. /// </summary> /// <param name="sheetName"> ...
- js的width函数
参考: (1)https://blog.csdn.net/chen__jinfei/article/details/6520678 (2)https://developer.mozilla.org/e ...
- redux 基础
antd 的使用 1.安装npm install antd --save 2.引入到项目中 import 'antd/dist/antd.css'; // or 'antd/dist/antd.les ...