Vue3全家桶 - VueRouter - 【4】路径参数

路径参数

  • VueRouter 中,可以在路径中使用一个动态字段来实现,我们称之为"路径参数":

    • 语法

      js 复制代码
      path: '/url/:params'
  • 在展示的组件中访问路径参数:

    • 选项式API
      • JS中采用 this.$route.params 来访问;
      • 视图模板上采用 $route.params 来访问;
    • 组合式API
      • 需要 import { useRoute } from 'vue-router'
      • JS和视图模板上通过 useRoute().params 来访问;
    • 还可以通过在路由规则上添加 props: true ,将路由参数传递给组件的 props 中;
  • 示例展示:

    • 基于上一小节的代码;

    • 路由模块 - router/index.js

      js 复制代码
      import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
      
      // TODO 创建路由规则数组
      const routes = [
        {
          path: '/',
          // 路由重定向
          redirect: '/guoMan'
        },
        {
          path: '/teleplay',
          name: 'teleplay',
          component: () => import('@/views/Teleplay/index.vue'),
          children: [
            {
              path: 'teleplayList/:id', // /:id - 路径参数
              name: 'teleplayList',
              component: () => import('@/views/Teleplay/components/TeleplayList.vue'),
              props: true  // 将路由路径上的动态参数,传递给组件的props
            }
          ]
        },
        {
          path: '/guoMan',
          name: 'guoMan',
          component: () => import('@/views/GuoMan/index.vue'),
          children: [
            {
              path: 'guoManList/:id', // /:id - 路径参数
              name: 'guoManList',
              component: () => import('@/views/GuoMan/components/GuoManList.vue'),
              props: true  // 将路由路径上的动态参数,传递给组件的props
            }
          ]
        },
        {
          path: '/riMan',
          name: 'riMan',
          component: () => import('@/views/RiMan/index.vue'),
          children: [
            {
              path: 'riManList/:id', // /:id - 路径参数
              name: 'riManList',
              component: () => import('@/views/RiMan/components/RiManList.vue'),
              props: true  // 将路由路径上的动态参数,传递给组件的props
            }
          ]
        },
        {
          path: '/movie',
          name: 'movie',
          component: () => import('@/views/Movie/index.vue'),
          children: [
            {
              path: 'movieList/:id', // /:id - 路径参数
              name: 'movieList',
              component: () => import('@/views/Movie/components/MovieList.vue'),
              props: true  // 将路由路径上的动态参数,传递给组件的props
            }
          ]
        }
      ]
      
      // TODO 创建路由
      const router = createRouter({
        // TODO 规定路由模式
        // history: createWebHashHistory(),
        history: createWebHistory(),
        routes
      })
      
      export default router
    • 只展示一个目录中的,其他目录的都一样:

      • views/GuoMan/index.vue

        html 复制代码
        <script setup>
        import { ref, reactive, computed, onMounted } from 'vue'
        
        onMounted(() => {});
        </script>
        
        <template>
          <h3>国漫</h3>
          <router-link to="/guoMan/guoManList/1" class="router-link">展示国漫列表</router-link>
          <hr>
          <router-view />
        </template>
        
        <style scoped>
        h3 {
          color: #fff;
          font-size: 30px;
          font-family: '隶书';
        }
        
        .router-link {
          padding: 0 10px;
          color: #fff;
          font-size: 24px;
          font-family: '隶书';
        }
        </style>
      • views/GuoMan/components/GuoManList.vue

        html 复制代码
        <script setup>
        import { ref, reactive, computed, onMounted } from 'vue'
        import { useRoute } from 'vue-router'
        let list = ref([
          {
            id: 'w45',
            title: '完美世界',
          },
          {
            id: 'y43',
            title: '一念永恒'
          },
          {
            id: 'z27',
            title: '赘婿'
          }
        ])
        const props = defineProps({
          id: {
            type: String
          }
        })
        // NOTE 获取的跳转的路由对象
        const routeObj = useRoute()
        onMounted(() => {
          console.log(routeObj.params)
        });
        </script>
        
        <template>
          <ul>
            <li v-for="({id, title}) in list" :key="id"> {{ title }} </li>
          </ul>
          <hr>
          <p>路径参数 - id - useRoute().params读取 :{{ routeObj.params }}</p>
          <hr>
          <p>路径参数 - id - useRoute().params.id读取 :{{ routeObj.params.id }}</p>
          <hr>
          <p>路径参数 - id - props.id读取 :{{ props.id }}</p>
        </template>
        
        <style scoped>
        li {
          list-style: none;
          padding: 0 10px;
          color: yellow;
          font-size: 24px;
          font-family: '隶书';
        }
        
        p {
          color: rgb(0, 255, 179);
          font-size: 24px;
          font-family: '隶书';
        }
        </style>
  • 运行展示:

相关推荐
liliangcsdn6 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero9 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui12 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚14 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴15 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
岩中竹17 分钟前
广东省省考备考(第四十九天7.18)——判断推理:位置规律(听课后强化训练)
笔记
sunbyte19 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常20 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常22 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾23 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法