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


Posted in Javascript onJuly 15, 2019

前言

几周前,我写了关于 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js关闭父窗口时关闭子窗口
Apr 01 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
You might like
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php注册登录系统简化版
2020/12/28 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PDO::rollBack讲解
2019/01/29 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
python实现2048小游戏
2015/03/30 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python编写猜数字小游戏
2019/10/06 Python
python 求定积分和不定积分示例
2019/11/20 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
授权委托书格式
2014/07/31 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Python3 如何开启自带http服务
2021/05/18 Python
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android