详解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' } })
  }
 }
}

注意,如果提供了 pathparams 会被忽略:

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

(0)

相关推荐

  • Vue异步组件处理路由组件加载状态的解决方案

    vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从服务器加载一个模块. 但是这种解决方案也有其问题,当网络环境较差时,我们去首次访问某个路由模块,由于加载该模块的资源需要一定的时间,那么该段时间内,我们的应用就会处于无响应的状态,

  • Vue.js父与子组件之间传参示例

    例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中. App.vue中 <component-a msgfromfa=&q

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • 基于vue 添加axios组件,解决post传参数为null的问题

    好,下面上货. 1.安装axios npm install axios --save 2.添加axios组件 import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.baseURL = 'http://localhost:7878/zkview'; Vue.prototype.$ajax = axios;

  • vue-router2.0 组件之间传参及获取动态参数的方法

    1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.addre

  • vue路由组件按需加载的几种方法小结

    1. 普通加载 使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题

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

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • React路由组件传参的三种方式(params、search、state)

    目录 向路由组件传递params参数 向路由组件传递search参数 向路由组件传递state参数 总结三种向路由组件传参的方式 向路由组件传递params参数 当点击消息1这个导航链接时,展示下方对应的Detail路由组件,并向这个组件传递params参数(ID,TITLE,CONTENT)信息. 向路由组件传递params参数:在路径后面跟上想要传递的值 { messageArr.map((msgObj) => { return ( <li key={msgObj.id}> <

  • 详解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路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解vue-router传参的两种方式

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 vue-router传参两种方式:params和query params.query是什么? p

  • 详解vue父子组件状态同步的最佳方式

    哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接

  • vue父子组件动态传值的几种方式及注意问题详解

    1.vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • 详解Vue的组件中data选项为什么必须是函数

    官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用.只有一个例外:data 必须是函数.实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么 Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data 必须是一个函数.但理解这种规则为何存在也是很有益处的,

随机推荐