vue项目点击跳转一个新标签页并渲染该页面，该页面可以写自己的逻辑；

实现之前先普及个知识。

一个mp4的链接，放到浏览器上，有两种可能。要么直接播放，要么直接触发下载；

原因是因为返回的content-type不同；

content-type：video/mp4，浏览器识别是MP4则会直接播放，

content-type：application/octet-stream，浏览器识别是二进制数据的视频则会触发下载。

看下图

进入正题

需求：那么我的需求是无论是什么样格式的数据，就是跳转个新标签页，新标签页播放此视频；

方法一

1.首先创建好terms.vue文件，再在router中注册一个路由

2.然后在你需要跳转的点击事件中写(vue3写法)

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

//事件
const downVideo = () => {
var url = "http://xxxx.mp4";//
 const routerUrl = router.resolve({
            path: "/terms",
            query: {
              url: url,
            },
          });
          window.open(routerUrl.href, "_blank");         
}
</script>

3.在创建好terms.vue文件，就可以写入自己逻辑‘

<template>
<video muted controls autoplay name="media" style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;max-height:100%;max-width:100%;margin:auto;">
<source :src="url" type="video/mp4">
</video>
</template>

<script lang="ts" setup>
import { defineComponent, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const url=ref("")
url.value=route.query.url
</script>