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

客官°小女子只卖身不卖艺 2023-10-01 11:35 125阅读 0赞

## 1.8 传递 prop 到路由组件 ##

### 1.8.1 概述 ###

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

### 1.8.2 耦合代码展示 ###

// 在组件中
    const User = {
        
        // 这里需要一个id，但是这个 id 只能从 URL 路径中获取
        template: `
    		<div>User：{
         { $router.params.id }}<div>
    	`
    }
    
    // 在路由导航的定义中
    const routes = [
        {
        
            path: '/user/:id',
            component: User
        }
    ]

### 1.8.3 使用 props 对它们进行解耦 ###

// 在组件中
    const User = {
        
        // 我们在这里接收参数 id
        props: [ 'id' ],
        // 在页面模板中使用 id
        template: `
    		<div>User：{
         { id }}<div>
    	`
    }
    
    // 在路由导航的定义中
    // 添加一个 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 组件 ####

<template>
      <div>
        在这里展示 id 参数的内容
        {
       { id }}
      </div>
    </template>
    
    <script>
    export default {
      // 接收一个参数 id
      props: ['id']
    }
    </script>
    
    <style>
    </style>

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

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

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

<router-link :to="{ path: '/message/100' }">消息100</router-link>

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

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

### 1.8.8 props 代码演示：对象 ###

#### 第一步：修改 Message.vue 组件 ####

<template>
      <div>
        在这里展示 id 参数的内容
        {
       { name }} == {
       { age }}
      </div>
    </template>
    
    <script>
    export default {
      // 接收一个参数 id
      props: ['name', 'age']
    }
    </script>
    
    <style>
    </style>

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

<router-link :to="{ path: '/message' }">消息</router-link>

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

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

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

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

### 1.8.9 props 代码演示：函数 ###

#### 第一步：修改 Message.vue 组件 ####

<template>
      <div>
        在这里展示 query 参数的内容
        {
       { query }}
      </div>
    </template>
    
    <script>
    export default {
      // 接收一个参数 query
      props: ['query']
    }
    </script>
    
    <style>
    </style>

#### 第二步：修改 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 ####

<template>
      <div>
        主页面
        <h1>{
       { str }}</h1>
        <router-link :to="'/message?q=' + str">消息</router-link>
        <button @click="toNews()">跳转到 News 页面</button>
      </div>
    </template>
    
    <script>
    
    import { getHomeData } from '@/api/test-api.js'
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    
    export default {
      setup () {
        // 拿到路由对象
        const router = useRouter()
        // toNews 方法
        const toNews = () => {
          // 跳转 + 传参
          router.push({ name: 'news', params: { title: '这是标题', content: '这是内容' } })
        }
        const str = ref('默认值')
        onMounted(async () => {
          const data = await getHomeData(null)
          str.value = data
        })
        return { str, toNews }
      }
    }
    </script>
    
    <style>
    
    </style>

#### News.vue ####

<template>
      <div>
        新闻页面<br />
        {
       { article.title }} == {
       { article.content }}
      </div>
    </template>
    
    <script>
    import { reactive } from '@vue/reactivity'
    import { useRoute } from 'vue-router'
    import { onMounted } from '@vue/runtime-core'
    export default {
      setup () {
        const route = useRoute()
        const article = reactive({
          title: '',
          content: ''
        })
        onMounted(() => {
          article.title = route.params.title
          article.content = route.params.content
          console.log(route.params)
        })
        return { article }
      }
    }
    </script>
    
    <style>
    
    </style>

#### 运行结果 ####

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