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

相关推荐
慧一居士12 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead14 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
陈洪奇6 小时前
注册中心学习笔记整理
笔记·学习
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js