vue 路由跳转,传参
一.直接跳转
//js
1.this.$router.push('/ad_new') //html
2.<router-link to="/ad_check">
<div class="top-menu-name">审核</div>
</router-link>
二.跳转传参
query传参,参数会显示在url后面?id=?
this.$router.push({
path: '/member',
query: {
id: id
}
})
路由配置
{
path: '/member',
name: 'member',
component: member
}
接收参数
this.$route.query.id
push 直接传参
this.$router.push({
this.$router.push('/member/'+id);
})
路由配置
{
path: '/member/:id',
name: 'member',
component: member
}
接收参数
this.$route.params.id
路由 name
this.$router.push({
name: 'member',
params: {
id: id
}
})
路由配置
{
path: '/member',
name: 'member',
component: member
}
接收参数
this.$route.params.id
vue 路由跳转,传参的更多相关文章
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
- vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...
- 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 } ...
随机推荐
- PostgreSQL学习笔记(一)-安装PostgreSQL
PostgreSQL官网:https://www.postgresql.org/docs/11/index.html1.如何安装2.如何修改配置文件3.如何设置自动启动4.如何修改数据用户密码 本文环 ...
- Java位运算原理及使用讲解
前言日常开发中位运算不是很常用,但是巧妙的使用位运算可以大量减少运行开销,优化算法.举个例子,翻转操作比较常见,比如初始值为1,操作一次变为0,再操作一次变为1.可能的做法是使用三木运算符,判断原始值 ...
- java学习笔记02-Eclipse IDE配置
Eclipse是java的ide工具,ide是集成开发工具.实际开发中都需要使用ide工具.eclipse下载 java代码在运行时,是需要先进行编译,然后才能运行.可以直接在IDE工具里运行,它会帮 ...
- 什么时候Python的List,Tuple最后一个Item后面要加上一个逗号
为什么看Python的代码,有时候会在数据结构的最后一项末尾加上逗号.直接来看,这个逗号很多余. 根据PEP81的解释: Trailing commas are usually optional, e ...
- Ubuntu的sources.list
参考文章: https://blog.csdn.net/u012843189/article/details/80964287 位于/etc/apt/sources.list 其中 deb http: ...
- 内地视频网站对各种浏览器HTML5的支持情况
实在闲得蛋疼 2017/10/1
- idea中classpath的问题
新创建的项目,在web.xml中配置 Spring MVC 的 DispatcherServlet,,指定springmvc.xml,结果这部分出错,请求的时候报错 结果查找,发现在Idea中,cla ...
- cc.Lable组件,RichText组件,AudioSouce组件的使用
一.cc.Lable组件的使用 1.创建Label的方法 a.通过菜单直接创建Label组件:b.先创建节点,然后在节点上绑定Label组件即可. 2.Label 面板上的属性 String => ...
- [转载 java 技术栈] eclipse 阅读跟踪 Java 源码的几个小技巧!
本文基于Eclipse IDE,我们每天都使用的IDE其实提供了很多强大的功能,掌握它们,往往能够事半功倍. 1.Quick Type Hierarchy 快速查看类继承体系. 快捷键:Ctrl + ...
- centos 7.5+如何格式化硬盘
[root@k8s-node2 ~]# fdisk -l Disk /dev/sdb: bytes, sectors Units = sectors of * = bytes Sector size ...