vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)">
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
this.$route.params.id
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
this.$route.params.id父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应子组件: 这样来获取参数
this.$route.query.id
vue 路由跳转传参的更多相关文章
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
- vue路由跳转传参
this.$router.push({ path: '/message/result_notice', query: { id: id } }) // let type = this.$route.n ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue 路由跳转带参 方式query ,params
a.vue向b.vue传值 a.vue this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:' ...
- vue路由跳转传参数
1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data } ...
随机推荐
- 洛谷——P1505 苹果摘陶陶
题目背景 根据2005年的Noip普及组第一题衍生出的一题. 但是有一点点的恶搞成分在里面..... 题目描述 话说去年苹果们被陶陶摘下来后都很生气,于是就用最先进的克隆技术把陶陶克隆了好多份> ...
- 洛谷 P1186 玛丽卡
P1186 玛丽卡 题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道 ...
- Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...
- 一次MySQL(INNODB存储引擎) 死锁捉虫记
前言 任何系统不管在什么阶段都需要关注生产环境错误日志,最近几个月内,发现偶尔会出现数据库死锁情况.以前碰到的数据库类错误大部分是SQL语法造成的错误,来到新东家之后才第一次碰到死锁情况,以前是搞游戏 ...
- [Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the ...
- [Angulalr] Speed Up Reducer Development Using Ngrx Schematics
When we use NGRX, we need to create some bolipates. Now with Angulalr6, we can use CLI to generate t ...
- 分享微软官方Demo用的SharePoint 2010, Exchange 2010, Lync 2010虚拟机
微软官方有一套专门用于SharePoint 2010, Exchange 2010 Demo的虚拟机:SharePoint 2010: Information Worker Demonstration ...
- 一条SQL语句求全年平均值
一年有8760个小时!(才这么点...) 有个气候表,存储了当地从1到8760小时的温度数据.现在,要求全年的温度每天平均值. CREATE TABLE #Climate(h INT ,t DECIM ...
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【bzoj2038】[2009国家集训队]小Z的袜子(hose)(细致总结)
[bzoj2038][2009国家集训队]小Z的袜子(hose)(细致总结) Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z ...