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. vscode中使用powershell显示分支名

    https://blog.csdn.net/weixin_43932597/article/details/125000557 windows powershell(或windows terminal ...

  2. Raize

    Raize.v5和Raize.v6 本人在windows10下装有delphi7和delphi2010,安装好Raize.v6后,两个版本delphi的控件页都找不到Raize控件,即使想编译相应的D ...

  3. 关于安装hadoop时在centos上修改主机名总是不成功

    按照老师给的文件和网上搜的代码改了很多次,比如改/etc/sysconfig/network这些,无论改几次都没用,找了个帖子,说可能是因为 CentOS7版本由于与之前版本变化比较大,修改主机名的方 ...

  4. nginx日志按日期存储

    http {     include       mime.types;     default_type  application/octet-stream;     map $time_iso86 ...

  5. Spring boot 无法加载css样式,image解决办法

    Spring boot 无法加载css样式,image解决办法   最近在 给公司做一个系统,使用了springboot框架,同时也遇到了一些大坑 在网上找到了一个好看的模版的,(非前后端的分离)但是 ...

  6. 关于import-route static 和default-route-advertise区别知识总结

    关于import-route static 和default-route-advertise区别知识总结 一.相关解释 import-route static  命令不能引入外部路由的默认路由,OSP ...

  7. Outlook怎么合并相同邮件?设置Outlook邮件为对话模式

    选择View->勾选"Show as Conversations", 这样同一个标题的邮件就是叠在一块显示了. 不蟹,bro.

  8. j2ee目录索引

    j2ee  不完全目录 Eclipse中配置约束(DTD,XSD) Eclipse 快捷键 及其 xsd dtd配置本地约束 ===================================== ...

  9. 输入流导致javax.crypto.BadPaddingException

    使用FileInputStream一切正常,切换为使用classpath从jar包读取getResourceAsStream一直报如下错误 javax.crypto.BadPaddingExcepti ...

  10. jmeter-时间处理

    ${__time(,)} 1486091280955 //无格式化参数,返回当前毫秒时间,默认13位.一般用来做时间戳 ${__time(/1000,)} //为取10位的时间戳的函数表达式(时间精确 ...