脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue页面路由参数的传递和获取

Vue页面路由参数的传递和获取方式

 更新时间：2026年03月26日 09:26:01   作者：月光晒了很凉快  
这篇文章主要介绍了Vue页面路由参数的传递和获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue页面路由切换时传参的方式

有如下几种：

1.动态路由参数

  • 它隐藏字段信息，相对于来说较安全，同时地址栏中的地址也相对较短
  • 它必须是先定义后使用，一般用于根据固定参数，返回对应的数据所用

2.query字符串 ?id=1

  • 通过search字符串的方式来在地址栏中传递数据，相对于来说地址栏会暴露字段信息安全性较低，
  • 一般用于搜索相关，它可以不定义就可以直接用

3.props 隐式传递

  • 隐式传递，它一般用于敏感数据的传递，可以不用

4.cookie/storage来完成对于页面传参

1. 通过动态路由参数传递

描述：

  • 当我们确定了某一个页面需要根据唯一标识来获取详情的时候，我们一般使用动态路由传递参数。
  • 要注意，通过这种方式传递数据，动态路由必须先定义后使用，并且获取数据时需要唯一标识。

使用：

news.js（这个文件是从 index.js 文件中抽取拆分出来的，最终要被引入到 insex.js 文件中）：

import News from '@/views/News'
import Detail from '@/views/Detail'

const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通过动态路由参数来完成页面数据的传递
    path: '/news/:id',
    component: Detail,
  },
]

export default routes

index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import news from './routes/news'

// 以插件的方式添加
Vue.use(VueRouter)

// 实例化路由对象及配置路由表
const routes = [...news]

const router = new VueRouter({
  // 路由模式
  mode: 'history',
  // 路由规则表
  routes
})
export default router

new.json（虚拟新闻 mooc 数据）:

[
  { "id": 1000, "title": "新闻1" },
  { "id": 2000, "title": "新闻2" },
  { "id": 3000, "title": "新闻3" }
]

new.vue（新闻页）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加载中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped></style>

detail.vue（新闻详情页）：

<template>
  <div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取动态路由参数数据
    console.log(this.$route.params)
  }
}
</script>

<style lang="scss" scoped></style>

2. 通过query字符串传递

new.vue（新闻页）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加载中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}?kw=abc`)
    }
  }
}
</script>

<style lang="scss" scoped></style>

detail.vue（新闻详情页）：

<template>
  <div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取query字符串
    console.log(this.$route.query)
  }
}
</script>

<style lang="scss" scoped></style>

3. props 隐式传递

news.js：

import News from '@/views/News'
import Detail from '@/views/Detail'

const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通过动态路由参数来完成页面数据的传递
    path: '/news/:id',
    component: Detail,

    // 写法1：回调函数写法，可以书写业务逻辑
    // router它就是一个路由对象
    props: router => {
      let title = router.params.id == '1000' ? '爆炸新闻' : '一般新闻'
      return {
        state: 2000,
        title
      }
    },
    // 写法2：这是一种没什么用的写法，没有业务逻辑
    // props: { title: '1', state: 2 }
  }
]

export default routes

new.vue（新闻页）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加载中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}?kw=abc`)
    }
  }
}
</script>

<style lang="scss" scoped></style>

detail.vue（新闻详情页）：

<template>
  <div>
    <h3>props: {{ state }} -- {{ title }}</h3>
  </div>
</template>

<script>
export default {
  props: ['state','title'],
}
</script>

<style lang="scss" scoped></style>

这种传递方式，可以敏感字段从地址栏中隐藏，不会暴露数据，而且回调函数的写法可以书写业务逻辑。

这种方式可以做数据埋点（也叫用户指纹），即隐蔽地收集用户数据。用户每次跳转页面都会触发 props 隐式传递，从而做到用户数据的收集。收集到数据后，通过python、大数据等技术，为用户建模，生成人物画像，由此可以进行大数据推荐。

除了上面两种写法以外，还有第三种写法

news.js：

import News from '@/views/News'
import Detail from '@/views/Detail'

const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通过动态路由参数来完成页面数据的传递
    path: '/news/:id',
    component: Detail,
    // 写法3：布尔类型
    // 布尔类型，一但使用，params动态路由参数传的数据，可以通过props来获取
    // 设置为布尔类型，可以简化，动态路由参数的数据获取
    props: true,
  }
]

export default routes

detail.vue（新闻详情页）：

<template>
  <div>
    <!-- 直接通过 props 获取动态路由参数 -->
    <h3>props: {{ $route.params }} -- {{ id }}</h3>
  </div>
</template>

<script>
export default {
  props: ["id"],
};
</script>

<style lang="scss" scoped></style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue中在新窗口打开页面及Vue-router的使用

    Vue中在新窗口打开页面及Vue-router的使用

    这篇文章主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-06-06
  • 在vue-cli中组件通信的方法

    在vue-cli中组件通信的方法

    本篇文章主要介绍了在vue-cli中组件通信的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue中el-table合并列的具体实现

    vue中el-table合并列的具体实现

    本文主要介绍了vue中el-table合并列的具体实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue实现购物车功能(亲测可用)

    vue实现购物车功能(亲测可用)

    这篇文章主要为大家详细介绍了vue实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 简单聊一聊axios配置请求头content-type

    简单聊一聊axios配置请求头content-type

    最近在工作中碰到一个问题,后端提供的get请求的接口需要在request header设置,下面这篇文章主要给大家介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下
    2022-04-04
  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 基于Vue的移动端图片裁剪组件功能

    基于Vue的移动端图片裁剪组件功能

    这篇文章给大家介绍了基于Vue的移动端图片裁剪组件功能，因为移动端是用vue，所以就写成了一个vue组件，下面就说说自己的一些实现思路,需要的朋友可以参考下
    2017-11-11
  • Vue中使用Swiper简单封装组件示例

    Vue中使用Swiper简单封装组件示例

    这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue中$bus的用法及$on、$off的使用说明

    Vue中$bus的用法及$on、$off的使用说明

    这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue实现数字动态翻牌器

    vue实现数字动态翻牌器

    这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论