$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上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,要怎么解决?
随机推荐
- 注解深入浅出之Retrofit中的注解(三)
更多andorid高级架构进阶视频免费分享学习请点击:https://space.bilibili.com/474380680 Retrofit中的注解 @Query,@QueryMap,@Field ...
- tcpdump - 转储网络上的数据流
总览 (SYNOPSIS) tcpdump [ -adeflnNOpqStvx ] [ -c count ] [ -F file ] [ -i interface ] [ -r file ] [ -s ...
- handsontable 随记
handsontable 怎么样获取合并之后的cell信息,如下 handsontable .getPlugin('mergeCells').mergedCellsCollection 看了他的源代码 ...
- 【Luogu】【关卡2-8】广度优先搜索(2017年10月)
任务说明:广度优先搜索可以用来找有关“最短步数”的问题.恩,也可以用来“地毯式搜索”.
- ajax请求的原生js实现
我们使用ajax请求一般都用的jQuery, axios封装好了的api, 那么如果只能用原生js, 我们该如何操作了? 上代码. 我们在同目录下写好一个json文件(data.json)用于请求测试 ...
- express 路由能力
demo var express=require("express"); var app=express(); app.get("/",function(req ...
- HTML5 原生API input file 来实现多图上传,并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
- python 爬取头条视频
知识点总结 1. 利用webdriver 模拟浏览器访问 from selenium import webdriver 2.import requests 3. from bs4 import Bea ...
- cocos2D-X 4.0 build
{ cmake . -G "Visual Studio 15 2017" cmake --build ./ }
- magento 为用户注册增加一个字段
步骤 I. 加一个occupation/title字段到用户注册页,差不多在register.html的54行,在email下方加一个Occupation显示代码 代码: <li>< ...