Vues中使用JavaScript实现路由跳转的步骤详解

免费资源网 – https://freexyz.cn/

目录

• 基础设置
• 使用模板内的方法实现跳转
• 模板部分
• 脚本部分
• 使用params传递参数
• 使用query传递参数
• 在目标组件中接收参数

在Vue应用中，利用Vue Router进行页面间的导航是一个常见需求。本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转，包括传递参数的两种方式：通过params和query。让我们一步步深入了解。

基础设置

首先，确保你的项目中已安装并配置了Vue Router。一个基本的Vue Router配置可能如下所示（在router/index.js文件中）：

import Vue from 'vue'
import Router from 'vue-router'
import Seq from '@/components/Seq'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/rd/proj/seq',
      name: 'Seq',
      component: Seq
    },
    // 其他路由配置...
  ]
})

使用模板内的方法实现跳转

模板部分

在Vue组件的模板中，你可以定义一个按钮，其点击事件会触发一个函数来执行路由跳转。

<template>
  <div>
    <button @click="navigateToSeq">跳转到Seq页面</button>
  </div>
</template>

脚本部分

在脚本部分，我们定义navigateToSeq方法来使用this.$router.push进行路由跳转。这里，我们将展示如何传递参数。

使用params传递参数

如果你希望在URL路径中不显示参数，可以使用params。

<script>
export default {
  methods: {
    navigateToSeq() {
      const row = { contractNo: '123' }; // 假设这是从某个地方获取的数据
      this.$router.push({ name: 'Seq', params: { contractNo: row.contractNo } });
    }
  }
}
</script>

注意，使用params时，接收参数需要在目标组件的beforeRouteUpdate钩子或通过this.$route.params.contractNo访问。

使用query传递参数

如果你想在URL中以查询字符串的形式显示参数，应该使用query。

<script>
export default {
  methods: {
    navigateToSeq() {
      const row = { contractNo: '123' };
      this.$router.push({ path: '/rd/proj/seq', query: { contractNo: row.contractNo } });
    }
  }
}
</script>

使用query时，可以通过this.$route.query.contractNo获取参数值。

在目标组件中接收参数

接收params

对于通过params传递的参数，在目标组件(Seq.vue)中，你可以在created或mounted生命周期钩子，或者使用watch来监听$route的变化来获取参数。

export default {
  created() {
    console.log(this.$route.params.contractNo); // 访问通过params传递的合同编号
  }
}

接收query

对于query参数，获取方式与params相同：

export default {
  created() {
    console.log(this.$route.query.contractNo); // 访问通过query传递的合同编号
  }
}

通过上述步骤，你可以在Vue应用中灵活地使用JavaScript实现页面之间的路由跳转及参数传递，无论是隐藏在URL中的参数还是直接展现在查询字符串中的参数，都能轻松应对。

免费资源网 – https://freexyz.cn/