Vue-router如何实现根据URL的结尾匹配子页面路由

首先，确保你的 Vue 项目中已经安装并配置了 Vue Router。

在 Vue Router 的路由配置中，使用 path 属性来匹配链接。你可以使用通配符 * 来匹配结尾，我这里以 "/media-preview"为例子。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import UserMediaPreview from '@/views/UserMediaPreview.vue';

const routes = [
  // 其他路由...
  {
    path: '/:pathMatch(.*)*/media-preview',
    name: 'UserMediaPreview',
    component: UserMediaPreview,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

上面的配置中，:pathMatch(.*)* 将匹配任何以 "/media-preview" 结尾的链接，然后将其导航到 "UserMediaPreview" 页面。

在你的 Vue 组件中创建 "UserMediaPreview" 页面，例如：

<!-- UserMediaPreview.vue -->
<template>
  <div>
    <!-- 页面内容 -->
    <h1>User Media Preview Page</h1>
  </div>
</template>

<script>
export default {
  // 组件定义
};
</script>

现在，当用户访问以 "/media-preview" 结尾的链接时，Vue Router 将导航到 "UserMediaPreview" 页面。

请注意，这只是一种方法，可以实现你所需的路由匹配规则。你可以根据你的项目需求和路由结构进行调整和扩展。确保在路由配置中引入正确的组件，并根据需要添加其他路由规则。