如果在vue2项目中 只想在某个页面 插入一行<script src='外部链接' ></script>,如何写代码
时间: 2024-10-10 11:01:53 浏览: 22
Vue中通过<script></script>引入的Vue.js文件
5星 · 资源好评率100%
在 Vue 2 项目中,如果你只想在一个特定的页面插入一段外部 JavaScript 脚本,通常你会在该页面的单个组件(如一个 `.vue` 文件)的 `<head>` 或 `<template>` 部分直接编写 `<script>` 标签。假设你想在 `MyComponent.vue` 页面引入外部资源,你可以这样做:
```html
<template>
<div id="my-component">
<!-- 其他内容 -->
</div>
</template>
<script>
// 如果你想在头部加载,可以放在 head 区域
<!-- 外部脚本引用 -->
<script src="https://example.com/external-script.js"></script>
export default {
name: 'MyComponent',
// ...其他组件配置
}
</script>
```
如果你想在某个路由对应的组件里动态插入,可以在对应的组件的 `mounted` 生命周期钩子中添加:
```html
<template>
<div id="my-component">
<!-- 其他内容 -->
</div>
</template>
<script>
import axios from 'axios'; // 假设你用axios获取外部链接
export default {
data() {
return {
externalScriptUrl: 'https://example.com/external-script.js'
};
},
mounted() {
axios.get(this.externalScriptUrl)
.then((response) => {
const scriptElement = document.createElement('script');
scriptElement.src = response.data;
document.head.appendChild(scriptElement);
})
.catch((error) => {
console.error('Failed to load external script:', error);
});
},
// ...其他组件配置
}
</script>
```
这样当组件挂载时,它会尝试从给定的URL加载并插入外部脚本。
阅读全文