1 this.$router.push({
2 // name:路由组件名
3 name: routeName,
4 query: {
5 mapId:this.mapId
6 }
7 })
8
9 this.$router.push({
10 name: routeName,
11 params: {
12 mapId:this.mapId
13 }
14 })
15
16 // query:参数会拼接在url上;params:参数不会直接拼接在请求体上
17
18 // 获取路由参数如下:
19 this.$route.query.mapId
20 this.$route.params.mapId
21
22
23 // 监听路由如下:
24 watch: {
25 $route: {
26 handler(val) {
27 // 逻辑操作
28 }
29 }
30 }

跳转路由传参如下:

获取路由参数如下:

监听路由如下:

Vue2路由跳转传参,获取路由参数,Vue监听路由的更多相关文章

  1. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  2. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  3. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  4. vue路由跳转传参的两种方法

    路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...

  5. vue 路由跳转传参

    <li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...

  6. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  7. vue 监听路由变化

    方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...

  8. vue监听路由变化

    使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }

  9. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  10. router.push query 路由 跳转 传参使用

    this.$router.push({path:'/shop',query:{ goods_name:goods_name, goods_price:goods_price, uid:goods_pr ...

随机推荐

  1. MyBatis_02_(搭建Mybatis)

    搭建MyBatis 1-开发环境 2-创建Maven工程 2.1- 打包方式 2.2 导入依赖 <!-- 打包方式jar--> <packaging>jar</packa ...

  2. SOAMANAGER 500 ERROR

    .调查原因是 SICF的服务有一个被开启了,取消激活就能解决这个问题. 可能的原因是在激活fiori的时候会自动激活

  3. Razor视图cshtml做到运行时编译【提高开发效率】

    当你的.NET开发工具升级到.NET Core版本以上,就会发现有时候无法将视图界面做的修改可以直接保存后刷新输出,一般都需要重新热重载或重新编译,这样会导致开发效率过慢的行为,开发者无法直接直观地看 ...

  4. VMware VirtualCenter Servere服务不能启动

    故障现象现象:VMware VirtualCenter Servere服务不能启动 解决办法:进入%programdata%\VMware\VMwareVirtualCenter\Logs目录下面. ...

  5. es 部署 进程、文件数 配置

    1.  /etc/security/limits.conf elasticsearch soft nofile 65536 elasticsearch hard nofile 65536 elasti ...

  6. 像MIUI一样做Zabbix二次开发(4)——乐维监控定制Zabbix的方法

    做监控源于我们早期做运维服务的必然需求,我们的愿望是基于Zabbix这个强大开源平台,结合实际一线运维工作的需要+ITIL等运维理论,做成类似MIUI一样的开发.易用.实用.人性和美观的全新的监控平台 ...

  7. C#如何将光标定位到文本框末尾(最后一位)

    代码如下:private void Movetoend(){//让文本框获取焦点this.TextBox1.Focus();//设置光标的位置到文本尾this.TextBox1.Select(this ...

  8. 睿爸信奥-【临阵磨枪】练习赛(第一场)- T3

    目录 题面 题目背景 输入格式 输出格式 思路 code 题面 题目背景 徐老师很胖,长宽高比例为1:1:1,他每次走路都要滚来滚去~~现在假设在一个平面上有 n 个没有公共点公共点的圆.徐老师要从点 ...

  9. C++实现顺序表相关操作

    //顺序表#include<iostream>#include<cstdlib>//C中stdlib.h动态分配内存using namespace std;#define OK ...

  10. 面试视频知识点整理1-13(mvvm框架)

    1.了解mvvm框架吗? Vue.js React Angular 2.谈谈你对mvvm的认识 由mvc和mvp演变而来 3.双向绑定是什么原理? object.defineProperty的用法要熟 ...