react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html
8、vue怎么通过路由传参?
a、通配符传参数

//在定义路由的时候
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
//在使用的时候
this.$router.push({
path: `/describe/${id}`,
})
//接收页面获取值
this.$route.params.id

b、params传参,跳转的时候不会显示在url上

//在定义路由的时候
{
path: '/describe',
name: 'Describe',
component: Describe
}
//在使用的时候
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
//接收页面获取值
this.$route.params.id

c、query传参,传餐的时候在url显示? key=value & key=value

//在定义路由的时候
{
path: '/describe',
name: 'Describe',
component: Describe
}
//在使用的时候
this.$router.push({
path: '/describe',
query: {
id: id
}
})
//接收页面获取值
this.$route.query.id

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?的更多相关文章
- 详解Python函数参数定义及传参(必备参数、关键字参数、默认可省略参数、可变不定长参数、*args、**kwargs)
详解Python函数参数定义及传参(必备参数.关键字参数.默认可省略参数.可变不定长参数.*args.**kwargs) Python函数参数传参的种类 Python中函数参数定义及调用函数时传参 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
- vue技术栈进阶(02.路由详解—基础)
路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- Ocelot简易教程(三)之主要特性及路由详解
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...
随机推荐
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- JS添加/移除事件
事件的传播方式 <div id="father"> <div id="son"></div> </div> &l ...
- HRBUST - 2358 Magic network
HRBUST - 2358 思路:dfs序 + 树状数组 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimiz ...
- Jmeter 接口测试知识梳理——持续集成篇
Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter + Ant ...
- audio进度条
如上图所示:为效果图 代码如下: <!doctype html><html> <head> <meta name="author" con ...
- C#中统计一个过程消耗的时间
使用Unity进行的测试,代码如下: using System.Collections; using System.Collections.Generic; using UnityEngine; us ...
- sql server 我常用的语句
1. computed column ) persisted; 2. unique nullable create unique nonclustered index[UniqueName] on [ ...
- SpringBoot集成TkMybatis插件
前提: 基于SpringBoot项目,正常集成Mybatis后,为了简化sql语句的编写,甚至达到无mapper.xml文件. 在本篇总结教程,不在进行SpringBoot集成Mybatis的概述. ...
- 输出图片格式BARTENDER
try { BarTender.Application btApp = new BarTender.Application(); BarTe ...
- python3-知识扩展扫盲易忘-map,collections.Counter()的用法
map() 会根据提供的函数对指定序列做映射. 第一个参数 function 以参数序列中的每一个元素调用 function 函数,返回包含每次 function 函数返回值的新列表. >> ...