如何独立模板文件使用 vue 和 vue router cdn？答案

【问题标题】：How to Independent template file use vue and vue router cdn?如何独立模板文件使用 vue 和 vue router cdn？
【发布时间】：2021-06-08 02:24:06
【问题描述】：

我有一个 HTML 文件，我使用 vue 和 vue router 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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以创建多个文件，例如：

`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>之前添加它们

【讨论】：

感谢您的回答，独立的JavaScript文件模板部分可以引用外部HTML文件吗？

one.js：

two.js：

three.js：

`one.js`：

`two.js`：

`three.js`：