我有一个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条答案
按热度按时间3vpjnl9f1#
您可以创建多个文件,例如:
one.js
:two.js
:three.js
:并从
index.html
中删除以下行:最后导入那些在当前脚本标记之前带有脚本标记文件
将它们添加到
<script type="text/javascript"></script>
之前yruzcnhs2#
one.html
two.html
three.html
app.html
index.html
index.js