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

相关推荐
musk12123 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘32 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
future14121 小时前
每日问题总结
经验分享·笔记
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端