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

详解Vue 路由组件传参的 8 种方式

 更新时间：2021年03月12日 09:31:16   投稿：mrr  
这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 vue-router@4 。

编程式路由传参

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1. 通过 params 传递

 路由配置

路径参数 用冒号 : 表示。

const routes = [
 // 动态段以冒号开始
 { path: 'details/:id', name: "details", component: Details },
]

router.push() 方法的参数可以是一个字符串路径，或者一个描述地址的对象。

const Home = {
 template: '<div @click="toDetails">To Details</div>',
 metheds: {
  toDetails() {
   // 字符串路径
   this.$router.push('/details/001')
   // 带有路径的对象
   this.$router.push({path: '/details/001'})
   // 命名路由，路由配置时，需要 name 字段
   this.$router.push({ name: 'details', params: { id: '001' } })
  }
 }
}

注意，如果提供了 path ， params 会被忽略：

// `params` 不能与 `path` 一起使用
router.push({ path: '/details', params: { id: '001' } }) // -> /details

组件获取数据

当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

const Details = {
 template: '<div>Details {{ $route.params.id }} </div>',
 created() {
  // 监听路由变化
  this.$watch(
   () => this.$route.params,
   (toParams, previousParams) => {
    // 对路由变化做出响应...
   }
  )
 },
}

2. 通过 query 传递

这种情况下 query （查询参数）传递的参数会显示在 url 后面，如： /details/001?kind=car 。

路由配置

使用 query 时，以下三种方式都是可行的：

this.$router.push('/details/001?kind=car')
this.$router.push({ path: '/details/001', query: { kind: "car" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})

组件获取数据

组件通过 $route.query 获取：

const Details = {
 template: '<div>Details {{ $route.query.kind }} </div>',
 created() {
  // 监听路由变化
  this.$watch(
   () => this.$route.query,
   (toParams, previousParams) => {
    // 对路由变化做出响应...
   }
  )
 },
}

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.query 。

3. 通过 hash 传递

通过此方式，url 路径中带有 hash ，例如： /details/001#car 。

路由配置

使用 hash 时，以下三种方式都是可行的（同 query ）：

this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})

组件获取数据

组件通过 $route.hash.slice(1) 获取：

const Details = {
 template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}

通过 props 进行传递

在组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为。

以解耦的方式使用 props 进行参数传递，主要是在路由配置中进行操作。

1. 布尔模式

当 props 设置为 true 时， route.params 将被设置为组件的 props。

例如下面的代码是通过 $route 的方式获取动态字段 id ：

const User = {
 template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

将上面的代码替换成 props 的形式，如下：

const User = {
 props: ['id'], // 组件中通过 props 获取 id
 template: '<div>User {{ id }}</div>'
}
// 路由配置中，增加 props 字段，并将值 设置为 true
const routes = [{ path: '/user/:id', component: User, props: true }]

注意：对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

const routes = [
 {
  path: '/user/:id',
  components: { default: User, sidebar: Sidebar },
  // 为 User 提供 props
  props: { default: true, sidebar: false }
 }
]

2. 对象模式

当 props 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。

路由配置

const routes = [
 {
  path: '/hello',
  component: Hello,
  props: { name: 'World' }
 }
]

组件中获取数据

const Hello = {
 props: {
  name: {
   type: String,
   default: 'Vue'
  }
 },
 template: '<div> Hello {{ name }}</div>'
}

<Hello /> 组件默认显示 Hello Vue，但路由配置了 props 对象，当路由跳转到 /hello 时，会显示传递过来的 name ， 页面会显示为 Hello World。

3. 函数模式

可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。

路由配置

使用函数模式时，返回 props 的函数接受的参数为路由记录 route 。

// 创建一个返回 props 的函数
const dynamicPropsFn = (route) => {
 return { name: route.query.say + "!" }
}
const routes = [
 {
  path: '/hello',
  component: Hello,
  props: dynamicPropsFn
 }
]

组件获取数据

当 URL 为 /hello?say=World 时， 将传递 {name: 'World!'} 作为 props 传给 Hello 组件。

const Hello = {
 props: {
  name: {
   type: String,
   default: 'Vue'
  }
 },
 template: '<div> Hello {{ name }}</div>'
}

此时页面将渲染：

注意：请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。

其他方式

1. 通过 Vuex 进行传递

1. store 存储状态；
    2. A 组件更改 store 中的状态；
    3. B 组件从 store 中获取。

2. 通过前端本地存储等方式

1. Local Storage;
    2. Session Storage;
    3. IndexedDB;
    4. Web SQL;
    5. Cookies。

到此这篇关于Vue 路由组件传参的 8 种方式的文章就介绍到这了,更多相关Vue 路由组件传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 自定义input组件如何实现拖拽文件上传

    自定义input组件如何实现拖拽文件上传

    这篇文章主要介绍了自定义input组件如何实现拖拽文件上传问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • Vue3生命周期钩子函数详解

    Vue3生命周期钩子函数详解

    这篇文章主要为大家详细介绍了Vue3生命周期钩子函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    安装node.js以及搭建vue项目过程中遇到的问题详解

    为了让一些不太清楚搭建前端项目的小白,更快上手,下面这篇文章主要给大家介绍了关于安装node.js以及搭建vue项目过程中遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 在vscode中统一vue编码风格的方法

    在vscode中统一vue编码风格的方法

    本篇文章主要介绍了在vscode中统一vue编码风格的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue 表单验证按钮事件交由父组件触发的方法

    vue 表单验证按钮事件交由父组件触发的方法

    这篇文章主要介绍了vue 表单验证按钮事件交由父组件触发的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue中利用iscroll.js解决pc端滚动问题

    vue中利用iscroll.js解决pc端滚动问题

    这篇文章主要介绍了vue中利用iscroll.js解决pc端滚动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue3响应式API之ref的使用

    vue3响应式API之ref的使用

    这篇文章主要介绍了vue3响应式API之ref的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • axios 实现post请求时把对象obj数据转为formdata

    axios 实现post请求时把对象obj数据转为formdata

    今天小编就为大家分享一篇axios 实现post请求时把对象obj数据转为formdata，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue-quill-editor插入图片路径太长问题解决方法

    vue-quill-editor插入图片路径太长问题解决方法

    这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 深入理解Vue router的部分高级用法

    深入理解Vue router的部分高级用法

    这篇文章主要介绍了Vue router的部分高级用法，主要是针对已经有初步了解Vue-router的人，通过本文主要给大家介绍路由元信息，滚动行为以及路由懒加载这几个的使用方法。感兴趣的朋友一起看看吧
    2018-08-08

最新评论