vue点击跳转路由

野性酷女 2024-04-01 02:18 97阅读 0赞

第一步：给按钮加点击事件，事件如下

async pageJump() {
          this.$router.push({
            name: 'Cx',
            params: {
              year: new Date().getFullYear()+''
            }
          })
        },

name是路由的名称，params是路由的参数，由这个点击事件，传递参数到下一个页面。

第二步：新跳转的页面增加activated函数。

activated() {
        this.init()
      },

第三步：把上个页面的传递过来的参数赋值给新页面的参数，并进行新的路由的调用。

methods: {
        init() {
          console.log(this.$route.params)
          const route = this.$route.params
        
          console.log(route.year)
    
          if (Object.keys(route).length) {
            this.queryParams.year = route.year // 时间
           
            // 查询
            this.handleQuery()
          }
        },
            /** 搜索按钮操作 */
        handleQuery() {
    
          this.queryParams.pageNum = 1;
          console.log(this.queryParams);
        
          this.getList();
         
          
        },
    
        getList() {
          this.loading = true;
          list001(this.queryParams).then(response => {
            console.log(response);
            this.List001 = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue点击跳转路由

第一步：给按钮加点击事件，事件如下 async pageJump() { this.$router.push({ name

野性酷女/ 2024年04月01日 02:18/ 0 赞/ 98 阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 20 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 273 阅读

相关 Vue 3路由跳转

import { useRouter } from 'vue-router'; export default { setup() {

ゝ一纸荒年。/ 2022年10月09日 02:43/ 0 赞/ 294 阅读

相关 VUE点击实现路由跳转传参

在页面开发中，我们经常需要实现点击跳转页面，并传递相应的参数过去在另一个页面展示出来。废话不说，直接上代码。路由发出页面 <template> <div id=

旧城等待，/ 2022年05月14日 08:14/ 0 赞/ 360 阅读

相关 Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。 vue路由配置的步骤： https://router.vuejs.org/ 1.安

亦凉/ 2022年03月17日 05:17/ 0 赞/ 341 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 497 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 475 阅读

相关 vue监听路由变化及路由跳转锚点

watch: { // 监听路由变化 $route(to,from){ console.log

阳光穿透心脏的1/2处/ 2021年09月23日 12:16/ 0 赞/ 690 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 653 阅读