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. 【java数据结构与算法】插入排序

    [插入排序解析]起始:假设第一个元素为已经排好序那么我们就要从数组的第二个元素开始每一轮确定1一个元素的正确位置所以外层循环的控制变量为 [1,arr.length)的左闭右开区间外层循环控制比较轮次 ...

  2. linux 动态库、静态库

    库:可执行的二进制代码,不可以独立执行(没有main函数入口) 库是否兼容:取决于编译器.汇编器.链接器 linux链接静态库(.a):将库中用到的函数的代码指令,写入到可执行文件中.运行时无依赖 l ...

  3. delphi get post

    procedure GetDemo;var IdHttp : TIdHTTP; Url : string;//请求地址 ResponseStream : TStringStream; //返回信息 R ...

  4. 本地部署一套k8s集群

    我这里准备三台本地vmware虚拟机,版本号centos7.9,一台master节点,一台node1,一台node2 kubeadm方式部署.Kubeadm 是一个 K8s 部署工具,提供 kubea ...

  5. easyui datagrid 表头与数据错位

    方法一:容易,实用的方法 在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace 例子:field. ...

  6. cudnn Backend API注意事项

    一.在包含多个节点的图中,不支持in-place node.(如果图只包含一个节点,支持in-place node) Note that graphs with more than one opera ...

  7. 关于git基本操作备忘

    1.将远程分支拉取到本地分支 git pull origin 分支名 2.将本地分支代码提交到远程分支 git push origin HEAD:Ft_6.8

  8. 前后端分离--token过期策略方案1

    https://blog.csdn.net/weixin_38827340/article/details/86287496?utm_medium=distribute.pc_aggpage_sear ...

  9. Linux基本概念

    目录 1. 内核.内核态和用户态 2. 用户和组 3. 文件和文件系统 4. I/O模型 5. 程序.进程.线程和协程 6. shell.终端和会话 1. 内核.内核态和用户态 ​ 内核是指管理和分配 ...

  10. Java 04-基础 数据类型转换 自动类型转换+强制类型转换

    1.数据类型自动转换 规则1:如果一个操作数为double型,则整个表达式提示至double型 规则2:满足自动类型转换条件,   两种类型要兼容,数值类型(整数和浮点)相互兼容   目标类型取值大于 ...