路由信息对象Route之属性query和params的区别
query的使用
第一步:在<router-link/>标签中配置如下
<router-link :to="{name:'beijing',query:{id:1,user:'lisi'}}">看电影</router-link>
第二步:在路由规则中配置(导航)
{name:'beijing',path:'/beijing',component:BeiJing}
第三步:在路由对应的组件created函数中输出内容
this.$route //全部内容(object)
this.$route.query.id //参数
查看在url中的路径
http://localhost:8080/move?id=1&user=lisi
params的使用
第一步:在<router-link/>标签中配置如下
<router-link :to="{name:'beijing',params:{id:2,user:'zousaili'}}">听音乐</router-link>
第二步:在路由规则中配置(导航)
{name:'beijing',path:'/beijing/:id/:user',component:BeiJing}
第三步:在路由对应的组件created函数中输出内容
this.$route //全部内容(object)
this.$route.params.id //参数
查看在url中的路径
http://localhost:8080/music/2/zousaili
路由信息对象Route之属性query和params的区别的更多相关文章
- vue路由信息对象
一个路由信息对象表示当前激活的路由的状态信息,每次成功的导航后都会产生一个新的对象. path字符串,对应当前路由的路径 params对象,包含动态路由参数 query对象,URL查询参数 hash字 ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- vue-router的query和params的区别
vue-router的query和params的区别 首先简单来说明一下$router和$route的区别 $router为VueRouter实例,想要导航到不同url,则使用$router.push ...
- 路由信息相关 route 网卡
目录 route命令 1.查看路由表 2.管理路由 基本网络配置 添加网卡地址 修改网卡UUID route命令 路由表管理命令,路由表主要构成: Destination: 目标网络ID,表示可以到达 ...
- 使用路由传参时,query与params的区别!
query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的pat ...
- vue路由传参query和params的区别(详解!)
1.query使用path和name传参都可以,而params只能使用name传参. query传参: 页面: this.$router.push({ path:'/city',name:'City' ...
- vue-router路由动态传参query和params的区别
1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...
- vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...
- Vue-路由传参query与params
注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...
随机推荐
- 微服务浪潮中,程序猿如何让自己 Be Cloud Native
前言 CNCF 与 Cloud Native 这两个技术词汇最近频频走进了程序员的视野,一切和他能搭上边的软件意味着标准.开放.时尚,也更能俘获技术哥哥们的心:这篇文章不想去带大家重温这个词汇后面的软 ...
- Error - The debugger's worker process (msvsmon.exe) unexpectedly exited.
Error - The debugger's worker process (msvsmon.exe) unexpectedly exited. 解决方法:Tools->Options-> ...
- 【转】C#中判断网址是否有效
本文内容来源网络,如涉及版权,请联系作者删除. 思路:C#语言判断网址是否正确,思路是向网址发起连接,根据状态判断网址是否有效. 代码如下: //仅检测链接头,不会获取链接的结果.所以速度很快,超时的 ...
- [PHP] foreach循环的引用赋值可能导致的问题
foreach($arr as &$value)1.引用赋值符号&,是每次循环的时候,把当前元素变成地址,$value变量就是对应元素的地址,循环结束$value是一个指向最后一个元素 ...
- Kotlin入门学习笔记
前言 本文适合人群 有一定的java基础 变量与方法 变量声明及赋值 var 变量名: 变量类型 val 变量名: 变量类型 这里,var表示可以改变的变量,val则是不可改变的变量(第一个赋值之后, ...
- centos-linux入门笔记
一.linux的用户 linux的用户和windwos差不多,分为管理员用户和普通用户. 普通用户:权限没那么高而已. 管理员用户:在linux中就是root用户,所拥有的权限是最高的. 二.linu ...
- 简单介绍Tomcat
Tomcat是一个Web容器,或者说是Web服务器.用于管理和部署Web应用.还有一种服务器叫做应用服务器,它的功能比web服务器要强大的多,因为它可以部署EJB应用,可以实现容器管理的事务,一般的应 ...
- 华为云的API调用实践(python版本)
一.结论: 1.华为云是符合openstack 社区的API,所以,以社区的API为准.社区API见下面的链接. https://developer.openstack.org/api-ref/net ...
- AndroisStudio列选择模式
今天敲代码的时候可能由于误开了“列选择模式”,在移动光标时,发现若光标所在列超过当前行的行尾列,不像一般情况应该跳到行尾,而变成了保持列的位置,停在了超过行尾的空白处, 如图:非一般情况 一般情况: ...
- Fragment 生命周期的详情
Fragment每个生命周期方法的意义.作用(注意红色的不是生命周期方法):setUserVisibleHint():设置Fragment可见或者不可见时会调用此方法.在该方法里面可以通过调用getU ...