router路由跳转不涉及传参

xiaoming_0208

于 2023-01-18 11:21:19 发布

阅读量167

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128724520

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这段代码展示了在Vue.js应用中，使用HTML元素绑定事件处理函数进行路由跳转的例子。当用户点击`在线数量`或`离线数量`时，会分别跳转到对应的相机管理页面，并传递状态参数。路由配置包含了路径、组件导入以及隐藏的路由设置。

摘要由CSDN通过智能技术生成

html

<div class="online-number">
          <span>在线数量</span>
          <span @click="jumpOnline">{{ onlineNumber }}</span>
        </div>
        <div class="offline-number">
          <span>离线数量</span>
          <span @click="jumpOff">{{ offLineNumber }}</span>
        </div>

// 路由跳转
    jumpOnline() {
      this.$router.push({
        path: "/camer/aicamera",
        query: {
          status: "1",
        },
      });
    },
    jumpOff() {
      this.$router.push({
        path: "/camer/aicamera",
        query: {
          status: 2,
        },
      });
    },
  },
};

router路由

path: '/',
    component: Layout,
    redirect: 'index',
    meta: {
      keepAlive: true,
    },
    children: [
      {
        path: 'index',
        component: (resolve) => require(['@/views/index_v1'], resolve),
        name: '监控首页',
        meta: { title: '监控首页', icon: 'dashboard'}
      },
      {
        path: '/camera/live',
        component: (resolve) => require(['@/views/index'], resolve),
        hidden: true
      },

        //跳转位置........................................................
      {
        path: '/device_management',
        component: () => import('../../src/views/camera/aicamera/index.vue'),
        hidden: true
      },
    ]
  },