Vue动态路由管理

官方介绍

引用自 Vue-Router官方文档：带参数的动态路由匹配 | Vue Router

补充更新：

后经过考虑转用query传参

与params的区别：

params地址栏根据路由路径设置显示： ……/video/[参数]

query地址栏显示：……/video?vid=[参数]

在路由设置中也不用写出参数

带参数的动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式	匹配路径	$route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

项目实例

在本项目中，无论是从首页还是稿件管理页面，点击视频封面或链接，都需要跳转至同一个组件——VideoPlay组件。但在跳转时，需要传递参数”videoId”，从而达到按需发送请求并渲染的目的。

本项目中的动态路由管理如下：

1. 创建好videoPlay组件。完成样式、功能以及数据绑定等。
2. 在router/index.js文件中，创建路由。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    ……
        {
          path: '/video/:videoId',
          name: 'video',
          component: () => import('../components/video/VideoPlay.vue')
        },
		……
  ]
})

export default router

1. 在需要跳转的组件中，此处以VideoUpload为例

• 被点击的item需要绑定videoId 以及 点击事件videoPlay

<script setup>
// 引入路由组件
import { useRouter } from "vue-router";
const router = useRouter();

// 请求来的列表数据 下面简单举例
let videoList = [
  {
    videoId: "1",
    videoUrl: "url1",
  },
  {
    videoId: "2",
    videoUrl: "url2",
  },
];

// 定义点击事件
const videoPlay = (id) => {
  router.push({
    path: "/video/" + id,
  });
};
</script>

<template>
    <div v-for="item in videoList" :key="item.videoId" @click="videoPlay(item.videoId)">
      <a>{{ item.videoUrl }}</a>
      <span>{{ item.videoId }}</span>
    </div>
</template>

1. 在VideoPlay组件中获取传过来的参数

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();

onMounted(() => {
  console.log(route.params); // {videoId: '1'}
});
</script>