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. syntax_lead_x.txt

    select lead( t1.field_date-1, 1, null ) over(partition by t1.field_str order by t1.field_str),*from ...

  2. js var

    var x= new Number(); alert(x)//0 x=new Object(); alert(JSON.stringify(x)) //{} x=new Boolean(); aler ...

  3. 学习-Vue3-绑定内联样式

    <template> <div> <!-- 绑定内联样式--绑定对象 --> <!-- <div :style="{color: active ...

  4. lua-路径加载lua文件-函数返回值,访问lua文件中的变量

    lua文件如下: print("ddhdhh")function login(username,pswd)if username =="ms" and pswd ...

  5. vs code for macOS的安装

    参考下载链接:http://www.pc6.com/mac/147684.html 汉化方法: 中文设置方法(如下图)在插件设置的搜索栏中输入"chinese",选择第一个简体中文 ...

  6. 2345 ip

    121.201.101.43 img1.2345.com121.201.101.43 img2.2345.com121.201.101.43 img3.2345.com121.201.101.43 i ...

  7. 8. C程序测试用数组个人技巧

    在测试程序的时候经常用到用于测试的数组. 这时,数组定义\声明时,最好不要填上元素个数. 当执行某种循环操作(例如将数组中的元素利用循环插入链表中时), 用sizeof(array_name)/siz ...

  8. Codeforces Round #781 (Div. 2) - D. GCD Guess

    GCD + 位运算 [Problem - 1665D - Codeforces](https://codeforces.com/problemset/problem/1627/D) 题意 交互题,有一 ...

  9. moment.js相关知识总结

    参考连接:https://www.jianshu.com/p/9c10543420de 1,ant-design-vue控件当中的日期控件 <a-date-picker @change=&quo ...

  10. windows shell

    屏蔽wifi名称:netsh wlan add filter permission=block ssid="wifi的名称" networktype=infrastructure ...