如何独立的模板文件使用vue和vue路由器cdn？
如何独立的模板文件使用vue和vue路由器cdn？
提问于 2021-03-10 06:53:54
我有一个HTML文件，我使用vue和vue路由器CDN
我希望将切换页面模板的部分分离成一个文件，或者使用javascript引入HTML模板。
这可行吗？
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<!-- vue.js cdn -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- vue axios call api server cdn -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue routr cdn-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<router-link to="/three">three</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
var one = {template:'<p>one</p>'};
var two = {template:'<p>two</p>'};
var three = {template:'<p>three</p>'};
var routes = [
{ path: '/', redirect: '/one'},
{path:'/one',component:one},
{path:'/two',component:two},
{path:'/three',component:three}
];
var router = new VueRouter({
routes: routes
})
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-03-10 13:03:17
您可以创建多个文件，例如：
one.js：
var one = {template:'<p>one</p>'};two.js：
var one = {template:'<p>two</p>'};three.js：
var one = {template:'<p>three</p>'};并从您的index.html中删除以下行：
var one = {template:'<p>one</p>'};
var two = {template:'<p>two</p>'};
var three = {template:'<p>three</p>'};最后，在当前脚本标记之前导入那些带有脚本标记的文件。
<script src="one.js"></script>
<script src="two.js"></script>
<script src="three.js"></script>在
<script type="text/javascript"></script>
之前添加它们
Stack Overflow用户
发布于 2022-11-03 05:52:00
one.html
<p>one component</p>two.html
<p>two component</p>three.html
<p>three component</p>app.html
<router-link to="/">one</router-link> |
<router-link to="/two">two</router-link>
<component_three/>
<router-view />index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
<title>test</title>
</head>
<body>
<div id="app"/>
<script type="text/javascript" src="index.js"> </script>
</body>
</html>index.js
const one = async () => {
let template = await fetch("one.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const two = async () => {
let template = await fetch("two.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const three = async () => {
let template = await fetch("three.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const app = async () => {
let template = await fetch("app.html")
template = await template.text()
return ({
template: template,
components: {
"component_three" : await three(),
},
setup() {/*...*/ }
})
}
const init = async () => {
const index = Vue.createApp(await app());
const routings = VueRouter.createRouter({
history : VueRouter.createWebHashHistory(),
routes : [
{path:'/', component: await one()},
{path:'/two', component: await two()}
]
})
index.use(routings)
index.mount("#app")
}
init()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66559733
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号