【Vue Router】008-传递 prop 到路由组件

1.8 传递 prop 到路由组件

1.8.1 概述

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。虽然这并不一定是坏事，但我们可以使用 props 对它们进行解耦。

1.8.2 耦合代码展示

// 在组件中
const User = {
    // 这里需要一个id，但是这个 id 只能从 URL 路径中获取
    template: `
		
User：{{ $router.params.id }}

	`
}

// 在路由导航的定义中
const routes = [
    {
        path: '/user/:id',
        component: User
    }
]

1.8.3 使用 props 对它们进行解耦

// 在组件中
const User = {
    // 我们在这里接收参数 id
    props: [ 'id' ],
    // 在页面模板中使用 id
    template: `
		
User：{{ id }}

	`
}

// 在路由导航的定义中
// 添加一个 props: true
// 当路由到 User 组件时，会自动获取 $router.params.id 作为 User 组件内的 id
const routes = [
    {
        path: '/user/:id',
        component: User,
        props: true
    }
]

1.8.4 带有命名视图的路由使用 props 解耦

必须为每个命名视图定义 props 选项

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

1.8.5 当 props 是一个对象

它将按原样设置为组件的 props ，这在 props 是静态的时候是非常有用的

{
  path: '/message',
  name: 'message',
  component: Message,
  // 这里 props 是一个对象
  props: {
    name: '刘备',
    age: '42'
  }
}

1.8.6 创建一个返回 props 的函数

{
  path: '/message',
  name: 'message',
  component: Message,
  props: route => ({ query: route.query.q })
}

1.8.7 props 代码演示：id

实现：当路由到 Message 组件时，会自动获取 $router.params.id 作为 Message 组件内的 id

第一步：新建一个 Message.vue 组件

第二步：在路由 index.js 中新增导航

import Message from '../views/Message.vue'
.
{
    path: '/message/:id',
    name: 'message',
    component: Message,
    props: true
}

第三步：在 Study.vue 页面新增 router-link

消息100

第四步：运行结果，成功拿到id

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFi4rOSi-1641036668724)(image-20210622155043805.png)]

1.8.8 props 代码演示：对象

第一步：修改 Message.vue 组件

第二步：修改 Study.vue 下面的 router-link

消息

第三步：修改路由配置 index.js

这里传递一个固定的对象，其实用性是不是大大缩减了呢！

{
  path: '/message',
  name: 'message',
  component: Message,
  // 这里 props 是一个对象
  props: {
    name: '刘备',
    age: '42'
  }
}

第四步：运行结果，成功拿到 name 和 age

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zfE3BKHg-1641036668724)(image-20210622160331775.png)]

1.8.9 props 代码演示：函数

第一步：修改 Message.vue 组件

第二步：修改 Study.vue 的 router-link

注意我这里的 to 没有带 :

可以写这样的字符串拼接：消息

需要带 : ，其中 name 是一个变量，这样的话就能够实现组件之间的传值了！

<router-link to="/message?q=大哥刘备">消息</router-link>

第三步：修改导航配置 index.js

{
  path: '/message',
  name: 'message',
  component: Message,
  props: route => ({ query: route.query.q })
}

第四步：运行结果，成功拿到 query

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MInKy73b-1641036668725)(image-20210622161703146.png)]

1.8.10 有一种跳转传参的方式

Home.vue

News.vue

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONvUEpeV-1641036668725)(image-20210625180713307.png)]