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>
  • 运行展示:

相关推荐
大莲芒13 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木2 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
郭涤生3 小时前
第三章:事务处理_《凤凰架构:构建可靠的大型分布式系统》
笔记·架构·系统架构
Li_Ning213 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一3 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla3 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
寻丶幽风4 小时前
论文阅读笔记——RDT-1B: A DIFFUSION FOUNDATION MODEL FOR BIMANUAL MANIPULATION
论文阅读·笔记·扩散模型·具身智能·双壁机器人
再学一点就睡4 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
奕天者4 小时前
C++学习笔记(三十三)——forward_list
c++·笔记·学习
CrimsonHu4 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css