Vue路由参数的传递与获取方式详细介绍

目录
  • 前言
  • 1. 通过动态路由参数传递
  • 2. 通过query字符串传递
  • 3. props 隐式传递

前言

vue 页面路由切换时传参的方式有如下几种:

动态路由参数

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

query字符串 ?id=1

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

props 隐式传递

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

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路由传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vuejs路由的传参及路由props配置详解

    目录 前言 方式1-使用query方式 命名路由 方式2-路由的params参数 query与params的区别 路由的props配置 路由配置的布尔模式 路由配置的对象模式 路由配置函数模式 总结 前言 在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻 下面介绍一下Vue中的路由传参以及路由的prps配置 方式1-使用query方式 这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一

  • 如何处理vue router 路由传参刷新页面参数丢失

    概述 常见场景:点击列表的详情,跳转到详情内页,在内页根据传递的参数获取详情数据. 路由传参一般有如下几种方式,下面主要介编程式导航 router.push 的传参方式: 方法一:通过 params 传参 路由配置如下: { path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail } 通过 $router.push 中 path 携带参数的方式 // 列表中的传参 goDetail(row) { thi

  • Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • Vue路由组件通过props配置传参的实现

    目录 一.基于params参数传递 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 二.基于Query和params参数传递(通用) 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 本文主要介绍了 Vue路由组件通过props配置传参的实现,分享给大家,具体如下: 一.基于params参数传递 1.index.js

  • vue路由传参-如何使用encodeURI加密参数

    目录 使用encodeURI加密参数 比如参数是一个对象obj 解密方式是使用decodeURI vue路由加密传参 传参页面 接收页面 使用encodeURI加密参数 在路由切换时页面需要使用地址栏传参,但地址栏会暴露参数的值,然后想到了encodeURI加密参数 比如参数是一个对象obj obj:{     id: 1,     name: 'Tom' } 那么需要将参数转换为JSON字符串,在使用encodeURI加密,需要注意的是通过路由跳转的时候会自动解密一次,所以需要加两次密 let

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • Vue路由传参及props解耦深入分析

    目录 一.路由传参 query传参 query配合声明式导航 query配合编程式导航 query传参的特点 params传参 路径使用参数占位时 路径不使用占位时 二.props解耦 1.props布尔值 2.props函数模式 3.props对象模式 关于路由传参的几种方式,众说纷纭.今天来总结下路由传参的几种方式与路由解耦: 一.路由传参 路由传参总的来说有两种方式,query和params,配合声明式导航与编程式导航,各有不同的几种写法: query传参 query配合声明式导航 //路

  • Vue路由参数的传递与获取方式详细介绍

    目录 前言 1. 通过动态路由参数传递 2. 通过query字符串传递 3. props 隐式传递 前言 vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说较安全,同时地址栏中的地址也相对较短 它必须是先定义后使用,一般用于根据固定参数,返回对应的数据所用 query字符串 ?id=1 通过search字符串的方式来在地址栏中传递数据,相对于来说地址栏会暴露字段信息安全性较低,一般用于搜索相关,它可以不定义就可以直接用 props 隐式传递 隐式传递,它一般用

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue路由跳转的4种方式小结

    目录 1. 标签路由 router-link 2.编程式路由 this.$router.push() 3.this.$router.replace()(与this.$router.push()类似) 4.this.$router.go(n) 5.this.$router.push().this.$router.replace().this.$router.go(n)区别 router-view 实现路由内容的地方,引入组件时写到需要引入的地方,需要注意的是,使用vue-router控制路由则必须

  • vue路由缓存的几种实现方式小结

    本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 vue 路由缓存的几种方式. 1.全部缓存 <keep-alive> <router-view></router-view> </keep-alive> 直接用 keep-alive 标签包裹 router-view 标签就能缓存全部的页面了 2.缓存单个指定路

  • Android Intent传递数据底层分析详细介绍

    Android  Intent传递数据底层分析详细介绍 我们知道在Activity切换时,如果需要向下一个ActivityB传递数据,可以借助Intent对象的putExtra方法. 但是不知各位有没有想过这样一个问题:ActivityB中获取到的对象跟上一个Activity中的那个对象有什么关系? 换句话说就是,我在ActivityB中通过Intent获取的对象跟ActivityA中的那个对象,有没有可能是同一个对象? 按照常理来说,博主提出一个设想后续的就是证明过程了,但是我要遗憾的告诉你,

  • Android  Intent传递数据底层分析详细介绍

    Android  Intent传递数据底层分析详细介绍 我们知道在Activity切换时,如果需要向下一个ActivityB传递数据,可以借助Intent对象的putExtra方法. 但是不知各位有没有想过这样一个问题:ActivityB中获取到的对象跟上一个Activity中的那个对象有什么关系? 换句话说就是,我在ActivityB中通过Intent获取的对象跟ActivityA中的那个对象,有没有可能是同一个对象? 按照常理来说,博主提出一个设想后续的就是证明过程了,但是我要遗憾的告诉你,

  • Vue electron前端开启局域网接口实现流程详细介绍

    目录 一.主要实现原理 二.获取本机局域网IP 三.开启服务器 四.关闭服务器 五.简单演示 六.整体代码 七.展望 一.主要实现原理 electron本身就集成了Nodejs,简直是不要太舒服.直接用最基本的http模块开接口即可,也可以用express,看个人喜好.下面演示的是http模块. 二.获取本机局域网IP 首先要获取本机局域网的IP,这就是接口的IP地址了. // 获取本机的局域网IP function getServerIp() { let interfaces = os.net

随机推荐