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>

运行展示：