脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-router在Vue页面传递数据

使用vue-router在Vue页面之间传递数据的方法

 更新时间：2019年07月15日 10:21:19   作者：尖锐Ax  
这篇文章主要介绍了使用vue-router在Vue页面之间传递数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

几周前，我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。

通常，在将导航构建到应用程序中时，您会发现需要将数据从一个页面传递到另一个页面。（不通顺）例如，您遵循 master-detail 模式，其中您有一个数据列表，通过更深入地挖掘可以获得关于列表中特定项的更多信息。

我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据。

如果你还没有读过我之前的教程或者不熟悉 vue-router 库，我建议你温习一下。

利用 URL 参数在不同页面中传递数据

假设您有一个 web 应用程序，它显示从某个数据库获得的用户列表。这个列表可能只包含姓名信息，但是数据库中的数据可能包含更多的信息，例如地址、电话等。

在典型的场景中，我们使用主键或其他标识符维护这个用户列表，并用于在请求详细信息时查询数据库时。这样的值可非常合适作为 URL 参数在不同页面传递。

为此，目标页面需要获取到 URL 参数。在前面的教程基础上，我们可以将项目 src/router/index.js 中的文件更改为如下所示

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      redirect: {
        name: "Page1"
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page2/:id',
      name: 'Page2',
      component: Page2
    }
  ]
})

注意，Page2 的路由中路径中包含一个 :id。这个冒号表示我们正在处理一个变量

打开项目src/components/page1.vue文件，将<template>块改为下面的样子，获取 URL 中的参数

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link :to="{ name: 'Page2', params: { id: 1234 } }">Navigate to Page2</router-link>
  </div>
</template>

在上面的代码片段中，我们选择将参数传递给指定的路由。该 id 将匹配先前在路由定义的参数。您可以定义多个参数，但是要小心，因为它们很容易造成问题

在接收端，我们需要弄清楚如何获取和处理路由参数。

打开 src/components/page2.vue 文件:

<template>
  <div class="hello">
    <h1>{{ msg }}, your id is {{ id }}</h1>
    <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
  </div>
</template>

<script>
  import router from '../router'

  export default {
    name: 'Page2',
    data () {
      return {
        id: 0,
        msg: 'Hey Nic Raboy'
      }
    },
    created() {
      this.id = this.$route.params.id;
    },
    methods: {
      navigate() {
        router.go(-1);
      }
    }
  }
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

与之前的例子相比，我们在上面的组件增加了一些内容

首先，您将注意到我们正在data方法中初始化一个id值。这是为了防止出现任何未定义的错误

每次创建组件时，Vue 都会调用其生命周期钩子的 Created 方法。在Created方法中，我们从$route获得传递的id值,并将其设置为局部变量。这个本地id变量在<template>块中

但是，如果我们需求传递更复杂的参数或者是可选参数，这时候就该换一种方式了

利用 Query 参数传递数据

Vue 中的查询参数与路由器参数的工作原理类似，但它们不是必需的，而且你并不需要事先修改路由

回到之前的src/components/page1.vue 文件上，其中 <template> 块如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link :to="{ name: 'Page2', params: { id: 1234 }, query: { debug: true }}">Navigate to Page2</router-link>
  </div>
</template>

注意，这一次我们将传递URL或路由器参数以及一组新的Query参数。这些Query参数可以是任意数量的键值对

我们来看一下在接受端怎么处理这些 Query 参数

打开src/components/page2.vue 文件， 修改<script> 如下：

<script>
  import router from '../router'

  export default {
    name: 'Page2',
    data () {
      return {
        debug: false,
        id: 0,
        msg: 'Hey Nic Raboy'
      }
    },
    created() {
      this.id = this.$route.params.id;
      if(this.$route.query.debug) {
        this.debug = this.$route.query.debug;
      }
    },
    methods: {
      navigate() {
        router.go(-1);
      }
    }
  }
</script>

就像使用路由器参数一样，我们在 data 方法中初始化了一个占位符变量。在Created方法中，我们检查Query参数中是否存在 debug 参数，如果存在，将其设置为本地变量

<template>
  <div class="hello">
    <h1>{{ msg }}, your id is {{ id }}</h1>
    <p>Debug mode is currently set to {{ debug }}</p>
    <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
  </div>
</template>

在上面的<template> 块中，我们展示debug变量

总结

本文你学到了如何使用 URL 参数和Query参数在 Vue 应用程序中的路由之间传递数据。如果你没有读过我上一篇关于页面导航的文章，你看到的一些东西可能没有多大意义。如果你还没有看过，我建议你去看看

via: https://www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/

译者：Alex1996a

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue.js,ajax渲染页面的实例

    vue.js,ajax渲染页面的实例

    下面小编就为大家分享一篇vue.js,ajax渲染页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vant框架van-cell插槽无法换行问题及解决

    vant框架van-cell插槽无法换行问题及解决

    这篇文章主要介绍了vant框架van-cell插槽无法换行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 解决vue3使用element-ui的具体操作

    解决vue3使用element-ui的具体操作

    elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue+element的表格实现批量删除功能示例代码

    vue+element的表格实现批量删除功能示例代码

    这篇文章主要介绍了vue+element的表格实现批量删除功能示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue-cli脚手架引入弹出层layer插件的几种方法

    vue-cli脚手架引入弹出层layer插件的几种方法

    layer.js(mobile)是一个小巧方便的弹出层插件，在之前的apicloud项目中被大量使用，但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦，决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法，需要的朋友可以参考下
    2019-06-06
  • vue实现商品购物车全选反选

    vue实现商品购物车全选反选

    这篇文章主要为大家详细介绍了vue实现商品购物车全选反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vuex安装失败解决的方法实例

    vuex安装失败解决的方法实例

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex安装失败解决的方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue-router中 query传参和params传参的使用和区别讲解

    vue-router中 query传参和params传参的使用和区别讲解

    这篇文章主要介绍了vue-router中 query传参和params传参的使用和区别讲解,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 详解vue父子组件间传值(props)

    详解vue父子组件间传值(props)

    本篇文章主要介绍了详解vue父子组件间传值(props)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 基于axios 的responseType类型的设置方法

    基于axios 的responseType类型的设置方法

    今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论